padding/margin bottom not working, i want to understand why

Question

I have a header element in a header div but for some reason i can't seem to add any bottom margin or padding to it. Margin/padding top, left, and right work find however. is there a reason for this? here is my code.

html

<div id="Container">
<div id="Header">  
   <h1>My Webpage</h1>
 </div>
</div>

css

#Container {

position: relative;
width: 96%;
height: 98%;
left:2%;
background-color: black;
border-radius: 10px;
box-shadow: 0px 0px 15px 5px;

}

/----------------------------------------/

#Header {

position: absolute;
height: 15%;
width: 100%;
/*background-color: red;*/
border-bottom: 2px solid #e8e2e2;

}

#Header h1 {

font-size: 2.5em;
text-align: center;
color:#e8e2e2;
/*background-color: red;*/

}

Well, header is an interesting element which has it's unique margins while rendered by browsers. This may leads to unwanted placements most times and not that reactive to the desired positionings. I didn't test your code but this maybe one of the reasons. Try to insert your code with "code snippet" tool to allow us evaluate the problem more clearly. Also you are missing a `#` before `Container` `id` selector. — Litestone, Nov 20 '14 at 00:33
oh I don't think i copied the #, i didn't want to copy everything so i just put in code i thought was relevant. i just found it strange that i could put my header down but not up. is it something to do with the height of the container div? — Sai, Nov 20 '14 at 10:53
Yes. Also it is about -let say- "nature" of rendering header tag. It is rendered with some "natural" top margin. — Litestone, Nov 20 '14 at 10:56

score 3 · Answer 1 · answered Nov 20 '14 at 00:38

3

I would avoid using position styling like that; it tends to interfere with the way block elements interact with each other. Based on the styles and markup provided, I don't see a reason why padding/margin would not be working; however your example doesn't actually show any padding/margin applied, so it's hard to say what might be going wrong.

I would alter your styling thusly:

#Container {
    width: 96%;
    margin-left: auto;
    margin-right: auto;
    background-color: black;
    border-radius: 10px;
    box-shadow: 0px 0px 15px 5px;
}

#Header {
    height: 15%; /* This should really be a static number, not a percentage*/
    width: 100%;
    border-bottom: 2px solid #e8e2e2;
    margin-bottom: 20px; /* This will push elements below your header div down by 20 px*/
}

answered Nov 20 '14 at 00:38

Redit0

370
1
14

Nice word "thusly" +1 – Billy Nov 20 '14 at 01:43
hey, thanks for pointing out margin auto, much more efficient method instead of left, but margin-bottom as no effect, i can't seem to push anything up – Sai Nov 20 '14 at 11:02
2

margin-bottom isn't meant to push things up, it's meant to push them down. So if you have an element with nothing below it, margin-bottom of 0 will look no different from margin-bottom of 100, since there's nothing for it to effect. If you're looking to move an element up, relative to where it would normally be, you can use a margin-top with a negative value – Redit0 Nov 20 '14 at 19:26
@Redit0 absolutely brilliant comment... I have learned something new and understand css just a little bit better :p – Govind Rai Oct 03 '16 at 19:53

score 1 · Answer 2 · answered Nov 20 '14 at 00:52

Try to add pading to header tag's self. Because it is relative to other containers.

#Container {
position:relative;
width: 96%;
height: 98%;
left:2%;
background-color: black;
border-radius: 10px;
box-shadow: 0px 0px 15px 5px;

}

#Header {
position:relative;
height: 15%;
width: 100%;
/*background-color: red;*/
border-bottom: 2px solid #e8e2e2;

}

#Header h1 {
    position:relative;
padding-top:20px;
font-size: 2.5em;
text-align: center;
color:#e8e2e2;
/*background-color: red;*/

}

<div id="Container">
<div id="Header">  
   <h1>My Webpage</h1>
 </div>
</div>

score 0 · Answer 3 · answered Nov 20 '14 at 00:39

Firstly, please add #for Container as in #Container in css. Below is the code where I have added margin bottom for h1. Please let me know if you still have any troubles.

    <html>
    <head>
    <style type="text/css">
    #Container {
    position: relative;
    width: 96%;
    height: 98%;
    left:2%;
    background-color: black;
    border-radius: 10px;
    box-shadow: 0px 0px 15px 5px;
    }
    #Header {

    position: absolute;
    height: 15%;
    width: 100%;
    /*background-color: red;*/
    border-bottom: 2px solid #e8e2e2;

    }

    #Header h1 {
    font-size: 2.5em;
    text-align: center;
    color:#e8e2e2;
    border:1px solid red;
    margin-bottom:10px;
    }
    </style>
    </head>
    <body>

    <div id="Container">
    <div id="Header">  
       <h1>My Webpage</h1>
       <p>some text here</p>
     </div>
    </div>

    </body>
    </html>

Hope this helps.

Thanks

score 0 · Answer 4 · answered Nov 20 '14 at 00:45

Padding-bottom and margin-bottom does actually work, it's just that it's not visible because you're currently setting the height of #Header to 15% and then giving it that light grey bottom border. This is what gives the illusion that padding-bottom or margin-bottom doesn't work.

See working version here http://codepen.io/sajadtorkamani/pen/zxxzgo

HTML

<div id="Container">
  <div id="Header">  
    <h1>My Webpage</h1>
  </div>
</div>

CSS

Container {
  position: relative;
  width: 96%;
  height: 98%;
  left:2%;
  background-color: black;
  border-radius: 10px;
  box-shadow: 0px 0px 15px 5px;
}

#Header {
  position: absolute;
  /* height: 15%; */
  width: 100%;
  /*background-color: red;*/
  border-bottom: 2px solid #e8e2e2;
}

#Header h1 {
  font-size: 2.5em;
  text-align: center;
  color:#e8e2e2;
  padding-bottom: 20px;
  /*background-color: red;*/
}

Just commenting out height: 15% for #Header solves the issue.

hey thanks, it's not exactly what i hoped would happen, i just wanted to know if i could position my header anywhere using margin/padding/bottom. however I'm surprised it still works without height, i assumed you should always set a width and a height to your divs, is this not the case? — Sai, Nov 20 '14 at 11:20
It's not always the case that you set the width or height but there may be times when it's probably a good idea. What generally isn't a great idea is setting the height of an element in percentages whose parent element doesn't have an explicit height. In this case an element will have the height of its content. This is what's happening in your case where #Container (the parent of #Header) has a percentage rather than explicit height. This post might be of help: http://stackoverflow.com/questions/1622027/percentage-height-html-5-css — Sajad Torkamani, Nov 20 '14 at 21:54

padding/margin bottom not working, i want to understand why

4 Answers4