CSS- margin-top not working

Question

#modal {
  background-color: #f0f0f0;
  //border: thin red solid;
  height: 500px;
}
#category_main {
  width: 75%;
  height: 200px;
  border: thin red solid;
  display: block;
  margin: 0 auto;
  margin-top: 5%;
}

<div id="modal">
  <div id="category_main"></div>
</div>

When I run then , margin-top is not working. the div category_main has come down with the div in which it is presented. I don't want that white part. instead of , only that red bordered box should be affected to margin-top.

Thank You.

Any help would be grateful.

Possible duplicate of [Why does this CSS margin-top style not work?](http://stackoverflow.com/questions/9519841/why-does-this-css-margin-top-style-not-work) — Vucko, Aug 01 '16 at 10:21

score 2 · Accepted Answer · answered Aug 01 '16 at 10:13

Instead of applying margin-top to #category_main, you should apply padding-top to #modal, as the former leaves a gap but the latter includes the same:

#modal{
    background-color: #f0f0f0;
    //border: thin red solid;
    height: 500px;
    padding-top: 5%;
}

See the demo here

M.Tanzil · Answer 2 · 2016-08-01T10:16:00.457

Add overflow:hidden to the parent so that the parent gain its real height you specified..

Here is the snippet

#modal{
        background-color: #f0f0f0;
        /*border: thin red solid;*/
        height: 500px;
        overflow:hidden;
}

  #category_main{
                width: 75%;
                height:200px;
                border: thin red solid;
                margin: 0 auto;
                margin-top: 15%;
            }

<div id="modal">
    <div id="category_main"></div>
</div>

NOTE

In css comments should be passed in between /*.......*/ this, not //....

score 0 · Answer 3 · answered Aug 01 '16 at 10:14

0

I think you have this the wrong way around. you want to put padding on the outer div.

 padding-top: 5%;

answered Aug 01 '16 at 10:14

Glenn Packer

212
1
8

score 0 · Answer 4 · edited Jun 20 '20 at 09:12

use this css for #modal,

vertical-align:middle;

display: table-cell;

#modal {
  background-color: #f0f0f0;
  //border: thin red solid;
  height: 500px;
  width: 500px;
  vertical-align: middle;
  display: table-cell;
}
#category_main {
  width: 75%;
  height: 200px;
  border: thin red solid;
  display: block;
  margin: 0 auto;
  margin-top: 5%;
}

<div id="modal">
  <div id="category_main"></div>
</div>

score 0 · Answer 5 · answered Aug 11 '16 at 12:39

Really if u dont want the white space as you desired, just add padding:5% to the main div..May b this will solve your problem

#modal {
  background-color: #f0f0f0;
  //border: thin red solid;
  height: 500px;
  padding: 5%;
}
#category_main {
  width: 75%;
  height: 200px;
  border: thin red solid;
  display: block;
  margin: 0 auto;
 
}

<div id="modal">
  <div id="category_main"></div>
</div>

#modal {
  background-color: #f0f0f0;
  //border: thin red solid;
  height: 500px;
  padding:5%;
}
#category_main {
  width: 75%;
  height: 200px;
  border: thin red solid;
  display: block;
  margin: 0 auto;

}

<div id="modal">
  <div id="category_main"></div>
</div>

CSS- margin-top not working

5 Answers5