爲什麼負右邊距不起作用？

由於具有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

這不會移動元素，它只會使段落寬度大於包容元素。並顯示：段落的塊是毫無意義的。 –

爲什麼負右邊距不起作用？

回答

相關問題