HTML and CSS margin issues

Question

applying to my div #logo margin value forces all my other elements to follow this margin. It's in the "logo" div margin value. while setting it to 0 it's all comes up. i just want to move only this element slightly down. why? and how can i fix it?

#logo  {
    width: 400px;
    height: 400px;
    margin: auto;
    margin-top: 200px; //!This!
}

#label {
    height: 50px;
    float: right;
    
   
}

nav {
    
    float: left;
    margin-left: 30px;
}

ul li{
    display: inline;
    text-decoration: none;
    font-size: 40px; 
    margin: 10px;
    border-bottom: 20px red;
    
}

<body>
        <div id="label"><img src="3.png"></div>
        
       <nav>
        <ul>
            <li><a href="#">About</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">Contacts</a></li>
        </ul>
           </nav>
        
        <div id="logo"><img src="1.png"></div>
        

    </body>

score 1 · Answer 1 · answered Jan 06 '18 at 17:45

1

#logo { position: relative; top: 200px; }

Relative positioning won't affect the position of the other elements.

answered Jan 06 '18 at 17:45

connexo

53,704
14
91
128

score 1 · Answer 2 · edited Jun 20 '20 at 09:12

As said by @Uchit Kumar it's due to margin collapsing as you can read here:

Two margins are adjoining if and only if:

... ...

both belong to vertically-adjacent box edges, i.e. form one of the following pairs:

top margin of a box and top margin of its first in-flow child

And since all the child element are floated, the first in-flow child is logo so its margin will collapse with the one of the container (the body).

So the easiest fix would be to make the third element to float also:

#logo {
  width: 100px;
  height: 100px;
  margin: auto;
  margin-top: 200px;
  float:left
}

#label {
  height: 50px;
  float: right;
}

nav {
  float: left;
  margin-left: 30px;
}

ul li {
  display: inline;
  text-decoration: none;
  font-size: 40px;
  margin: 10px;
  border-bottom: 20px red;
}

<body>
  <div id="label"><img src="https://lorempixel.com/100/100/"></div>
  <nav>
    <ul>
      <li><a href="#">About</a></li>
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">Contacts</a></li>
    </ul>
  </nav>

  <div id="logo"><img src="https://lorempixel.com/100/100/"></div>


</body>

But this solution is not the suitable one as it will change the behavior of the logo and maybe floating is not needed here.

Another fix to avoid margin collapsing is to add a small padding-top to container (the body):

body {
 margin:0;
 padding-top:1px;/*added this */ 
}
#logo {
  width: 100px;
  height: 100px;
  margin: auto;
  margin-top: 300px;
  clear:both;
}

#label {
  height: 50px;
  float: right;
}

nav {
  float: left;
  margin-left: 30px;
}

ul li {
  display: inline;
  text-decoration: none;
  font-size: 40px;
  margin: 10px;
  border-bottom: 20px red;
}

<body>

  <div id="label"><img src="https://lorempixel.com/100/100/"></div>
  <nav>
    <ul>
      <li><a href="#">About</a></li>
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">Contacts</a></li>
    </ul>
  </nav>

  <div id="logo"><img src="https://lorempixel.com/100/100/"></div>


</body>

Or simply use margin-bottom in the previous element instead:

body {
  margin: 0;
}

#logo {
  width: 100px;
  height: 100px;
  margin: auto;
  clear: both;
}

#label {
  height: 50px;
  float: right;
}

nav {
  float: left;
  margin-left: 30px;
  margin-bottom: 300px;
}

ul li {
  display: inline;
  text-decoration: none;
  font-size: 40px;
  margin: 10px;
  border-bottom: 20px red;
}

<body>

  <div id="label"><img src="https://lorempixel.com/100/100/"></div>
  <nav>
    <ul>
      <li><a href="#">About</a></li>
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">Contacts</a></li>
    </ul>
  </nav>

  <div id="logo"><img src="https://lorempixel.com/100/100/"></div>


</body>

Here is a very usefull link were you can find a more complete explanation about collapsing margin and floating:

margin-top not working with clear: both

Uchit Kumar · Answer 3 · 2018-01-06T19:29:52.473

0

quick fix is ..

#logo  {
    width: 400px;
    height: 400px;
    margin: auto;
    margin-top: 200px;
    float: left
}

its may be due to margin collapsing... (not sure) read this.. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing

edited Jan 06 '18 at 19:29

answered Jan 06 '18 at 17:53

Uchit Kumar

667
10
26

are you sure it's margin collpasing ? i don't think so, it's a simple float issue. You can add a small padding-top and the issue will remain so it cannot be margin collapsing – Temani Afif Jan 06 '18 at 18:38
Adjacent siblings-- The margins of adjacent siblings are collapsed (except when the latter sibling needs to be cleared past floats). so if you add clear both to #logo .. it will work properly – Uchit Kumar Jan 06 '18 at 18:51
strange, i tried it but it's not working for me ... (and i think it's better to precise what kind of collpasing, cause i always go to the parent/child one :) ) – Temani Afif Jan 06 '18 at 18:52
one more strange thing... have you tried with code having this ... margin-top: 200px; //!This! try removing above comment .. and adding clear both – Uchit Kumar Jan 06 '18 at 18:54
@TemaniAfif is it working now? – Uchit Kumar Jan 06 '18 at 19:01
well the float:left is fixing the issue and not the clear:both .. clear:both alone doesn't fix the issue but float:left alone fix it – Temani Afif Jan 06 '18 at 19:05
so am not really sure about the margin collpase .. i read also this *Note that the margins of floating and absolutely positioned elements never collapse.* Or maybe it collapse between float and non-float ? and not two float ? – Temani Afif Jan 06 '18 at 19:07
https://jsfiddle.net/q2fdm6f7/ check this. – Uchit Kumar Jan 06 '18 at 19:09
yes and you don't have margin in your code :) so there is an issue – Temani Afif Jan 06 '18 at 19:14
and look here : https://jsfiddle.net/whkxjjzy/1/ we have margin, and it should be like this. So the clear both is not fixing the issue – Temani Afif Jan 06 '18 at 19:15
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/162658/discussion-between-uchit-kumar-and-temani-afif). – Uchit Kumar Jan 06 '18 at 19:18
added my answer :) took me time but i think it deserve it so we can understand it well ;) – Temani Afif Jan 06 '18 at 20:09
and you may read this to understand about clear:both https://stackoverflow.com/questions/4198269/margin-top-not-working-with-clear-both/41335816#41335816 – Temani Afif Jan 06 '18 at 20:31

HTML and CSS margin issues

3 Answers3

Linked