为什么负右边距不起作用？

由于具有margin-left: -10px的元素的边缘与父元素的边缘交叉，因此为什么margin-right: -10px不会发生同样的情况？为什么负右边距不起作用？

div { 
 
    background: red; 
 
    width: 200px; 
 
    height: 100px; 
 
} 
 

 
p { 
 
    background: blue; 
 
    width: 100%; 
 
} 
 

 
.left { 
 
    margin-left: -10px; 
 
} 
 

 
.right { 
 
    margin-right: -10px; 
 
}

<div> 
 
    <p class="left">Hello</p> 
 
</div> 
 
<div> 
 
    <p class="right">Hello</p> 
 
</div>

来源

2013-03-31 anton_byrna

这是因为元件是由左到右的默认布局不对到左。你可以看到相反的效果，当你float<p>是正确的。

jsFiddle

.right { 
    margin-right: -10px; 
    float:right; 
}

来源

2013-03-31 19:05:28

在左边的课堂上留下了余量。 –

那么，这很容易修复：'.right {float：right}' 这将工作。 –

我不明白。我们有宽度的容器来填充容器元素，我们有负的右边距，应该拉出元素，因为我猜 –

的好消息是，负利润率做工作！

导致出现负利润的工作，考虑下面的代码片段：

.wrapper { 
 
    outline: 1px solid blue; 
 
    padding: 40px; 
 
} 
 

 
.content { 
 
    outline: 1px solid red; 
 
    background-color: #D8D8D8; 
 
} 
 

 
.content p { 
 
    outline: 1px dotted blue; 
 
    background-color: rgba(255, 255, 0, 0.3); 
 
    margin: 0 0 0 0; 
 
    text-align: justify; 
 
} 
 

 
.content p.lefty { 
 
    margin-left: -20px; 
 
} 
 

 
.content p.righty { 
 
    margin-right: -20px; 
 
}

<div class="wrapper"> 
 
    <div class="content"> 
 
    <p>Lorem ipsum dolor sit amet, ...</p> 
 
    <p class="lefty">Sed ipsum ante, dictum vel rhoncus id, ...</p> 
 
    <p class="righty">Curabitur aliquam tristique mattis...</p> 
 
    </div> 
 
</div>

我加outline的所有div的和p的展现延长内容框。

第一段的边距为零，我向左和向右偏移了一段。

如果您有足够的内容来填充段落的宽度（或者如果您显示轮廓），您将在content框外看到文本框流程。您还可以从outline的段落中看到，文本确实向左和向右延伸。

但是，要查看右侧的效果，需要足够的内容来填充段落的整个宽度，或者需要在子元素上设置背景颜色或轮廓。

如果你开始固定的宽度和高度，对content，你会看到其他效果，如流动的content外的段落。

研究这个简单的代码结构说明了CSS盒子模型的许多方面，并且它花费了一些时间与它照亮。

小提琴参考：http://jsfiddle.net/audetwebdesign/2SKjM/

如果从wrapper取出填充，你可能不会注意到右边距的改变，因为该元素将扩大，以填补父容器的整个宽度或者根据页面宽度HTML/CSS的具体细节。

为什么我的示例不显示效果!!! ???

在您的例子，你没有看到效果，因为通过指定width: 100%，其引导段采取父容器（在您的示例200像素）的宽度固定p元件的宽度。

如果你做一个简单的改变宽度从100%到auto：

p { 
    background: blue; 
    width: auto; 
}

，你会看到你的第二段刚出来的权利，你的预期。

注：大纲VS边境 另外请注意，红色框是由于outline，包围content内的文本框，即使文本框的父（content）元素的外部延伸。因此，outline框可能比相应元素的border框大得多。

来源

2013-04-01 00:15:14

我明白，如果不是指向元素的确切宽度，那么它将增加宽度以适应其他水平框属性。所以在你的例子中，实际宽度将是'width_of_containment_element + 20'，所以它将会大于包容元素的宽度。我只是想知道为什么利润率会从母公司中提取元素，而不是保证金。 –

在我的演示中，您可以看到第三个（最底部）段落延伸到'content' div（灰色背景）的右侧。你的问题是否与你原来的小提琴/演示特别相关？ –

请参阅有关轮廓和边界范围的附加说明。 –

简单，只需要改变这个CSS：

p { 
    background: blue; 
    width: 100%; 
}

到：

p { 
    background: blue; 
    display: block; 
}

这里演示：http://jsfiddle.net/pVKNz/

如果你想取得像换挡元件，使用CSS：

.left { 
    margin-left: -10px; 
    margin-right:10px; 
} 

.right { 
    margin-right: -10px; 
    margin-left:10px; 
}

来源

2013-04-01 04:26:59 Fredy

这不会移动元素，它只会使段落宽度大于包容元素。并显示：段落的块是毫无意义的。 –

为什么负右边距不起作用？

回答

相关问题