Bhavin Shah Bhavin Shah - 2 months ago 16x
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>

When I run then , margin-top is not working. the div
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
. enter image description here

Thank You.

Any help would be grateful.


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:

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

See the demo here