Question about margins

Yes, because margin: 30px 30px; means 30px margin top and bottom, and 30px margin left and right (of the box — and not of the page);

Cesare is correct. If I may add when ever we give an auto left and right margin it allows browsers to autamatically gives an equal the left and right margin thus making it appear centered. When we give it a specific margin it will have a fixed margin and it won't know you want it to be centered.

http://www.w3schools.com/css/css_margin.asp

Take a look at this it explains different ways you can write how margin displays.

The margin property can have from one to four values.

margin: 25px 50px 75px 100px;

• top margin is 25px
• right margin is 50px
• bottom margin is 75px
• left margin is 100px

margin: 25px 50px 75px;

• top margin is 25px
• right and left margins are 50px
• bottom margin is 75px

margin: 25px 50px;

• top and bottom margins are 25px
• right and left margins are 50px

margin: 25px;

• all four margins are 25px

Read more here.

:)

Set the width 50% of the parent element.

OK...the parent element is a div with the class "margin-edge"

So....

If I keep the width set to 50% of the parent element...adjusting the right margin has no effect if I specify all the margins.

It only works if the left/right margins are set to "auto".

I think I get it. It's a bit confusing....

I'm still not understanding this.

There's a dashed red margin border around the box. Changing the top and bottom margins adjusts the box as I expect.

However, changing the right and left margins does not. It shows what looks like 30px of margin on the LEFT...but a huge space on the right...WITHIN the dashed red margin border around the box.

In other words, there's a big margin on the right.

What am I missing here regarding the right margin?

Thank you.

Can you post all your code?

The same thing happens when I do this:

margin-top: 30px; margin-right: 30px; margin-left: 30px; margin-bottom: 30px;

BUT....

If I do this:

margin-top: 30px; margin-right: 30px; margin-left: 30px;

...the left margin is 30px.

As soon as I add...

margin-bottom: 30px;

...it creates that huge margin on the right.

Clearly I'm not understanding how margins work.

Here it is:

.box { color: #3c2f2f; background-color: #fff4e6; padding: 40px; border: 2px solid #854442; margin-top: 30px; margin-right: 30px; margin-left: 30px; margin-bottom: 30px width: 50%; text-align: justify; }

.margin-edge { /* Our "margin border" */ border: 3px dashed red; }

Glad to hear you figured out the issue. Let us know if it's still unclear.

Take a look at this article it explains it a little more. This site is so a great reference to have I use it all the time when ever I have doughts as to how to use certain properties.

http://css-tricks.com/almanac/properties/w/width/

Hope it helps.

Thank you. I'll have a look at it.

...and thank you to everyone who responded.