I have two divs:
<div id="headercontainer" data-type="background" data-speed="5">
<div id="headersubcontainer">
<h1>Simple and Cost Effective Web Solutions</h1>
</div>
</div>
<div id="teamcontainer" data-type="background" data-speed="5">
<div id="teamsubcontainer">
<h1>Developed by a dedicated team</h1>
</div>
</div>
两个元素都具有100%的宽度和高度,为800像素。第一个标题我设置了top-margin: 160px。但是它没有向下移动到其父div中,而是将父div一起向下移动。您可以在这张图片中看到:
以下是相关CSS:
h1{
font-size: 48px;
font-family: $header-font-stack;
font-weight: 100;
width: 400px;
}
#headercontainer{
width: 100%;
height: 800px;
background-image: image-url("background.jpg");
background-position: center top;
background-repeat: no-repeat;
}
#headercontainer h1{
text-align: center;
margin: 0px auto;
margin-top: 160px;
color: #610B21;
}
使用内边距显然可以达到效果,但我更想用外边距进行设置。如何设置上边距并将标题下移至容器内,而不将容器一起移动?