我有两个div:
<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%的宽度和800px的高度。第一个标题是我设置了一个上限: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;
}
使用填充显然工作,但我想更合适并使用边距。如何设置上边距并将标题下移到容器中而不用移动容器?
这是由于margin collapsing:
块的顶部和底部边距有时会合并(折叠)为单个边距,其大小是合并到其中的边距中的最大边距,这种行为称为边距折叠。
这导致父元素反向继承子元素上边距。
您可以通过在子元素之前添加
来防止这种情况
....或将以下任何一项应用于父母:
如果将display:inline-block;
设置为宽度为100%,则将Demo Fiddle添加到父级可能是首选项
box-sizing: border-box;
只需在父母身上使用padding
并在那里设置margin-top
而不是JSFIDDLE。无论如何,它将帮助您在所有方面保持一致的间距
只需在父元素中添加一些top-padding。甚至1px,它将解决它。
我实际上认为这个答案更好:
qazxswpoi
是的,我知道这是我自己的答案,但我认为重要的是我们不要添加填充的随机位,无缘无故地更改盒子大小,向DOM添加虚假元素,或者更改显示/填充只是为了修复显示问题。这些解决方案都会导致问题:搜索引擎优化更糟糕,尝试做其他事情时难以预测的大小调整行为,定位和显示更改引起的烦恼等等。这个解决方案对SEO有好处,可扩展,没有其他有形的尝试用你的元素做其他事情时的效果。