Question

在包装器div中，浮动元素似乎不响应左右边距设置。例如：

HTML：

<div id ="wrapper">
    <div id = "content"></div>
</div>

的CSS：

#wrapper
{
   width:       1000px; 
   display:         block;
   margin-left:         auto;
   margin-right:    auto;
   overflow:            hidden;
}

#content
{
   width:               400px;
   height:              200px;
   display:             block;
   float:               left;
   margin-left:         30px;
}

#content忽略其左边距设置。为什么呢？

Answer 1

边距不会移动浮动元素，它们会“推开内容”。

如果要移动浮动元素，可以为其提供以下CSS规则：

#content {
    position: relative;
    left: 30px;
}

另一种方法是为元素提供透明边框：

#content {
    border-left: 30px transparent;
}

如果您只是想在另一个div中放置div ，请使用绝对定位：

#wrapper {
    position: relative; /* required for absolute positioning of children */
}

#content {
    position: absolute;
    left: 0;
}

Answer 2

@ Marcus的回答很好。另一种假设在浮动元素上有边距的方法是将内容放在另一个容器中并使用填充：

.outer
{
    float: left;
    padding: 10px;
}

.inner
{
}

Answer 3

在这种情况下，最完美的CSS技术是将CSS转换属性与转换X或Y一起使用。此属性仅作用于浮动元素，因此不会产生移动其他元素的意外影响。

示例转换如下：

.floated-element {
  // move the floated element 10 pixels to the left
  transform: translateX(-10px);
}

为什么浮动元素不能设置左右边距

3 个答案: