CSS列表間距段後

Question

如果我有用戶生成的內容，如：

<p>my paragraph</p> 
<ul> 
    <li>item1</li> 
    <li>item2</li> 
</ul> 

此輸出與段落的結束和列表像這樣之間的一段差距：

我第

• 物品1
• ITEM2

我知道我可以通過在p標籤上設置UL標籤和margin-bottom上的margin-top來消除CSS中的空白，但有沒有辦法在不影響實際段落之間的邊距的情況下執行此操作。

內容是由用戶生成的，有一組可用的標籤，沒有字體，尺寸...可用，所以如果可能，所有格式都應該在CSS中完成，而不必將類放入標籤中。

編輯： 應該把我知道，因爲這樣利潤率CSS倒塌的作品，我通常可以設置

p { margin-bottom:0; } 
li { margin-top:0; } 

的分離是在兩種情況下是在保證金-top屬性正確的p標籤仍然是1，但我已經將margin-top設置爲0.2em，h2和p標籤之間的間隔較小。

Answer 1

這是兄弟選擇器的完美用例。但是，它在IE6或IE7中不起作用。

p { margin: 0; } 
ul { margin-top: 0; margin-bottom: 0; } 
p + p { margin-top: 15px; } 
p + ul { margin-top: 3px; } 
ul + p { margin-top: 3px; } 

因此，這裏發生了什麼是我設置了相關的利潤爲0，在p和UL，然後告訴任何兼容的瀏覽器尋找的p的p後是並添加上邊距它。在p之後的一個ul（儘管這是一個小的餘量）和ul（大的餘量）之後的p相同。

同樣，這在IE6和7中不起作用，因此您可能希望使用條件註釋在這些瀏覽器上獲得體面的（如果不是完美的）外觀。

Answer 2

如果您想要定位ul元素，請使用相鄰的兄弟選擇器。

p + ul { margin-top: 0; } 

有設置p下邊距這種方式沒有體面的方式，但如果需要的話，你可以在ul使用陰性切緣。

Answer 3

除了IE6/7之外，其他的答案都很好，正如他們所說的。但是，只要您將p的頂部邊距設置爲當前邊距的兩個值中的較大值，即使您將p底部邊距設置爲0，也不會影響段落之間的邊距。只要您沒有問題將012頁頂部邊距設置爲0，那麼您的邊距就不會受到影響。因此，讓我們說你有這個當前定義：

p {margin: 10px} 

將其設置爲這樣：

p {margin: 10px 10px 0} 

會不會影響你的保證金標籤p之間（這似乎是你的關心），作爲10px底部邊緣與頂部一起摺疊，使得差距僅爲10px。如果您的底部邊距當前設置爲大於頂部邊距，則需要將頂部邊距更改爲較大值，以查看與之相同的間距。現在，如果你想在最後的p有一些底部保證金，那麼你將不得不適應。

如果什麼類型的用戶在特定的包裝div，您可以指定（通過id或class）結束了，那麼你可以只設置這些樣式p和ul只內包裝適用，如果這是一個問題。

Answer 4

這取決於你的代碼的其餘部分，但它應該是確定的，你做的事：

p{ margin-bottom:0; }

你可能會認爲這會影響您的所有段落的其餘部分，但由於CSS的「保證金「摺疊」功能它實際上不應該 - 只要你在標準模式下有效的DOCTYPE。

讓我知道你是否需要更多的解釋 - 或者它不起作用。

Answer 5

如果你有像建設波紋管：

<p>my paragraph</p> 
<ul> 
    <li>item1</li> 
    <li>item2</li> 
</ul> 

和CSS一樣：

p { margin: 0 0 25px 0; } 

它可能會導致P和LIST之間的間隙。

我決定使用負保證金這個問題：

p + ul { margin-top: -20px; }