html and css bottom margin doesn't work

Question

I can't realize why bottom margin doesn't apply to the menu bar. I tried all types of paddings, margins and everything. I have no clue what to add or change so it can apply to it. I was trying to put position relative to #header and absolute to .menu and then all broke. I dont know what I did wrong?

JsFiddle Link

My HTML:

<body>
<div id="wrapper">
<div id="header">
<div id="header_left"></div>
<div id="header_right">
  <div class="menu">Naslovna</div>
  <div class="menu">PVC stolarija</div>
  <div class="menu">ALU stolarija</div>
  <div class="menu">Ostali proizvodi</div>
  <div class="menu">Reference</div>
  <div class="menu">Kontakt</div>

  </div>
  </div>
  <div id="header_line"></div>
  <div id="content">
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  </div>
  <div id="footer_line"></div>
  <div id="footer"></div>
  </div>


 </body>
 </html>

My CSS:

  @charset "utf-8";
 /* CSS Document */

  body{
background:#FFF;
margin:0;
padding:0;
  }

  #wrapper{
backgorund:#FFF;
width:100%;
height:100%;
}

  #header{
background-image:url(struktura/header_bckg.png);
background-repeat:repeat-x;
height:140px;
width:100%;


  }

 #header_left{
width:40%;
height:100%;
display:inline;
  }

 #header_left img{
margin: 10px 0 0 20px;
  }

#header_right{
width:55%;

display:inline;

    }

 .menu{
width: 100%;
display: inline;
font-family: "Myriad Pro";
font-size: 20px;
color: #333333;
margin: 0 0 0 40px;
bottom:20px;

}



 #header_line{
background-image:url(struktura/header_line.png);
background-repeat:repeat-x;
height:5px;
width:100%;
  }

 #content{
background: #FFF;
width: 100%;
height: 600px;


  }

 #footer_line{
background-image:url(struktura/footer_line.png);
background-repeat:repeat-x;
height:5px;
width:100%;
  }

 #footer{
background-image:url(struktura/footer_bck.png);
background-repeat:repeat-x;
height:250px;
width:100%;
   }

What does "doesn't work" mean? What's not happening that you want to happen? — j08691, Apr 28 '14 at 14:21
it doesnt apply margin. I put margin 20 px and in firebug it is shown but not applyed — squizyt, Apr 28 '14 at 14:39

Artem Petrosian · Accepted Answer · 2014-04-28T14:49:11.940

0

Top and bottom padding/margin has no effect on inline elements.

Here is a good article that explain this.

So, the solution for you might looks like:

.menu{
    display: inline-block;
    font-family: "Myriad Pro";
    font-size: 20px;
    color: #333333;
    margin: 40px;
    bottom: 20px;
}

edited Apr 28 '14 at 14:49

answered Apr 28 '14 at 14:40

Artem Petrosian

2,964
1
22
30

html and css bottom margin doesn't work

1 Answers1