CSS margins and paddings

Question

When I try to set margin-top to the #nav element, why does that property than affects the whole header div?

heres the source:

<!DOCTYPE html>
<html>
  <head>
    <title>Improving Great Deal</title>
    <style type="text/css">
      * {
        margin: 0px;
        padding: 0px;
      }
      #header {
        background: black;
        height: 60px;
        width: 100%;
        clear: left;
      }
      #nav {
        width: 50%;
        height: 40px;
        background: red;
        margin: 5px auto;


      }
      #nav ul {
        list-style: none;


      }
      #nav ul li {
        float: left;

      }
      #nav ul li a {
        text-decoration: none;
        color: white;
        font-size: 20px;
        padding: 0px 23px;
        line-height: 34px;
      }
    </style>
  </head>
  <body>
    <div id="header">
      <div id="nav">
        <ul>
          <li><a href="#">Pocetna</a></li>
          <li><a href="#">Forum</a></li>
          <li><a href="#">Blog</a></li>
          <li><a href="#">Pitanja</a></li>
          <li><a href="#">Informacije</a></li>
          <li><a href="#">Zarada</a></li>
        </ul>
      </div> 
    </div>


  </body>
</html>

What are you expecting to see? – j08691 Sep 07 '15 at 20:16 — j08691, Sep 07 '15 at 20:16

score 1 · Answer 1 · answered Sep 07 '15 at 20:17

1

The reason being margin gets overlapped and you need overflow: hidden; to show it. See the details below. To include the margin of the children, you need to add overflow: hidden. The possible explanation for this is as below.

Few possible solutions for this issue include:

div { border: 2px solid transparent;
      overflow: hidden;}

div table {display: block;}

The browser always collapses the margins with the nearby margins. When you give an overflow: hidden, it calculates all the contents inside it's box model and makes it confine to the content.

Sorry about my quick dirty handwriting...

This is the same case with floats too. Floated items do not occupy any space. Have a look here:

div {padding: 5px; border: 1px solid #666;}

<div>
  <div style="float: left;"></div>
</div>

But the same thing, if the parent has an overflow: hidden it doesn't happen:

div {padding: 5px; border: 1px solid #666;}

<div style="overflow: hidden;">
  <div style="float: left;"></div>
</div>

A whole big article about this concept here: What You Should Know About Collapsing Margins. The overflow is such a powerful property that it works for everything. But when it comes to position you need to use it carefully!

The position works like float, in the way that both do not take the layout. For eg., see the below snippet:

div {padding: 5px; border: 1px solid #666;}

<div>
  <div style="position: absolute;"></div>
</div>

Where, if you play with it in the wrong way:

div {padding: 5px; border: 1px solid #666;}

<div style="overflow: hidden; position: relative;">
  <div style="position: absolute;"></div>
</div>

The contents above get cut. Hope it is clear.

answered Sep 07 '15 at 20:17

Praveen Kumar Purushothaman

164,888
24
203
252

1

So did you really read and understand the question, write this long answer and draw an image, took a photo .. just in 3 minutes?! Hm.. – dfsq Sep 07 '15 at 20:18
@dfsq I had the answer already in my blog. `:)` – Praveen Kumar Purushothaman Sep 07 '15 at 20:19
And you also had it here http://stackoverflow.com/questions/32142797/why-do-overflow-clear-margin-of-p-tag – j08691 Sep 07 '15 at 20:19
@j08691 Partially yes. – Praveen Kumar Purushothaman Sep 07 '15 at 20:19
@dfsq Yes, I read the question. It is about overlapping margins. Am I wrong? – Praveen Kumar Purushothaman Sep 07 '15 at 20:20
1

:) it is, just funny anyway how quick it was – dfsq Sep 07 '15 at 20:21
1

So it's a duplicate and should be closed as such...no? Especially, as the answer is *exactly the same*! – Paulie_D Sep 07 '15 at 20:23
@Paulie_D No it isn't a duplicate. [That](http://stackoverflow.com/questions/32142797/why-do-overflow-clear-margin-of-p-tag) is a different issue, and this is totally a different question. – Praveen Kumar Purushothaman Sep 07 '15 at 20:24
1

If the answer is the same...it's a dupe in my book. – Paulie_D Sep 07 '15 at 20:25
Check both @Paulie_D, there's a difference. It is not a dupe for sure. Let me know if it is a dupe. – Praveen Kumar Purushothaman Sep 07 '15 at 20:32
1

Well, the answer is collapsing margins and I'm sure there's another answer (if not your other one) that this could be closed as a dupe of. – j08691 Sep 07 '15 at 20:34

CSS margins and paddings

1 Answers1