Im sure this is very simple but i have been looking at this for a while today and just cant figure it out.
All i want to do is move the top div '#template-nav' down a little bit so there is some white space above it. I have tried margin-top and padding but it just wont move down.
I have the jsfiddle below along with the code, be really grateful to find out where i have gone wrong here.
https://jsfiddle.net/rufusbear/Lgx7eksa/
<div id="template">
<div class="template-row">
<div id="template-nav"></div>
</div>
<div class="template-row">
<div id="template-jumbo"></div>
</div>
<div class="template-row">
<div class="template-col-1"></div>
<div class="template-col-2"></div>
</div>
<div class="clearfix"></div>
<div class="template-row">
<div id="template-footer"></div>
</div>
</div>
#template {
background: #fff;
width: 400px;
height: 400px;
margin-top: 10%;
}
.template-row {
max-width: 380px;
margin: 0 auto;
}
#template-nav {
height: 40px;
background: #8dcdc1;
padding-top: 10px;
}
#template-jumbo {
height: 150px;
margin: 2% 0%;
background: #d3e397;
}
.template-col-1 {
height: 130px;
width: 48%;
float: left;
margin-right: 2%;
background: #fff5c3;
}
.template-col-2 {
height: 130px;
width: 48%;
float: left;
margin-left: 2%;
background: #fff5c3;
}
#template-footer {
height: 40px;
margin: 2% 0%;
background: #d3e397;
}
.clearfix:after {
content: '.';
clear: both;
display: block;
height: 0;
visibility: hidden;
}
Thanks all
Adding a margin-top to that top element inside #template
won't work, since the margins of the element and its top child influence each other. But you can add a padding-top
to #template
:
#template {
background: #fff;
width: 400px;
margin-top: 10%;
/* removed height property */
padding: 10px 0; /* adds padding to top and bottom evenly */
}
Just a basic CSS edit....
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.