Bhavin Shah Bhavin Shah - 4 months ago 42
CSS Question

CSS- margin-top not working



#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
. enter image description here

Thank You.

Any help would be grateful.

Answer

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

Comments