Problems with adding margin

Question

Link to the website: https://jsfiddle.net/L84vhah9/

Now go into the CSS, go all the way down to .box and change the margin: 0 auto; to margin: 2% auto;

Then check the website again. See how the whole section moves/gets the margin instead of just the box. It creates a space between the nav and section.

Why is this happening?

Shouldn't just the .box get the margin? I don't understand why <section> gets it.

I think you're misunderstanding what `margin` does. If you imagine your box element, margin will give it space outside of its border, and padding will give it space inside its border. There are some more well-put explanations here: http://stackoverflow.com/questions/2189452/when-to-use-margin-vs-padding-in-css — Lucas Watson, Apr 30 '16 at 14:35
@Lucas I understand what margin and padding does. You might've missunderstood my problem. I want to add space on the top and bottom sides of the box, but when I did that it behaved like the section got the margin which created a space between the nav and the section with the section being the white space that the green boxes were inside. — , Apr 30 '16 at 14:40

score 0 · Accepted Answer · answered Apr 30 '16 at 14:33

0

See this fiddle

You could easily solve the problem by adding

overflow:auto;

or

overflow: hidden;

to the parent div..ie to your section.

Thus, the updated CSS for section and .box would be as follows

section {
    overflow: hidden;
  width: 90%;
  height: auto;
  margin: 0 auto;
  background-color: #fff;
}

.box {
  width: 90%;
  height: 300px;
  margin: 2% auto;
  border: 5px solid #36FF54;
  background: #ffffff;
}

answered Apr 30 '16 at 14:33

Lal

14,726
4
45
70

Thanks a lot! This was the only thing needed. Could you explain why it was behaving like it did before without overflow? – Apr 30 '16 at 14:39
Great.. :) Glad that it helped you.. Actually, earlier I too had the same problem and while searching stack overflow I heard somebody saying that it is because the parent div fails to consider the height of the child div for some reason and hence that behaviour.. – Lal Apr 30 '16 at 14:42
Okay, makes a bit more sense now but I am still kinda lost. Thanks a lot anyway! Finally fixed it. :) – Apr 30 '16 at 14:46
Happy to help.. :)... @Fotan could you please mark the answer as accepted if it really helped you.. – Lal Apr 30 '16 at 14:46
1

http://stackoverflow.com/questions/1762539/margin-on-child-element-moves-parent-element – Roko C. Buljan Apr 30 '16 at 14:51
@Lal Ok, No worries! :D – Apr 30 '16 at 14:51
1

Better to use a proper `.clearfix` than `overflow:hidden` or **better/rather** `overflow:auto`. – Roko C. Buljan Apr 30 '16 at 14:52
understood @RokoC.Buljan..Thankyou for that info.. – Lal Apr 30 '16 at 14:53

Problems with adding margin

1 Answers1

See this fiddle