我遇到了一个非常令人沮丧的边距情况。我的标记顶部有一个向右浮动的 div。
.grey{
float:right;
width:200px;
}
我需要对之后的第一段应用一些样式(背景和边距)。
.blue{
background-color: blue;
margin: 10px;
overflow:hidden;
}
现在我必须让段落“溢出:隐藏”这样背景就不会延伸到 float 的 div 下,但我有 2 个奇怪的问题。
边距似乎不适用于段落中接触 float 的一侧;
边距似乎适用于它旁边的 float 元素..
这是一个 fiddle 。 http://jsfiddle.net/whiteatom/Nkfzg/6/
谁能告诉我如何获得“蓝色”元素和 float 元素之间的边距空间?谁能告诉我如何让我的 float 元素没有这些幻象边距?
干杯,
白原子
最佳答案
您需要为 float 元素应用左边距,以便将其与段落隔开:
.grey {
float: right;
width: 200px;
margin-left: 10px;
}
如前所述,边距折叠会导致段落的上边距影响页面主体。这导致它将段落和 float 元素都向下推。
要移除 float 元素的上边距,您有两种选择(只能选择一种):
通过 float body 取消 margin collapse:
body { float: left; }
这会导致边距只影响段落。 Updated fiddle
为您的 float 元素应用负的上边距:
.grey { float: right; width: 200px; margin-left: 10px; margin-top: -10px; }
在这里,您将 float 元素向上移动以抵消边距折叠,它仍然有效。 Updated fiddle
关于css - 影响旁边 float block 的段落边距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14024720/