css - margin-top issue on HTML -


i have following html

<body>     <div class="template">         <div class="box"></div>    </div> </body> 

my css

.template{     height:500px;     width:1000px;     background-color:#e1bfbe;     margin:0 auto; } .box{     height:420px;     width:165px;     background-color:#ffffff;     margin-left:416px;     margin-right:417px;     margin-top:37px;     margin-bottom:38px; } 

now following output

enter image description here
but when add float:left; in .box class following image

enter image description here

only margin-top not working without float:left; why should add float:left top margin element .box ?

here's thread describes same problem: css margin terror; margin adds space outside parent element

it's common issue non-collapsing margins.

an alternative adding float: left overflow: auto


Comments

Popular posts from this blog

apache - PHP Soap issue while content length is larger -

asynchronous - Python asyncio task got bad yield -

javascript - Complete OpenIDConnect auth when requesting via Ajax -