如何在沒有設置行高的情況下設置div中的行之間的間距

我有一個包含顯示設置爲內聯塊的元素的div。這些包含的元素有不同的高度。根據它們中元素的高度，div中產生的線條具有不同的高度。這是我想要的。但我想在div中的行之間添加一些空格。例如，具有背景顏色集的相鄰線條中的元素應該在它們之間具有可見的間隙。 paragrpah的常見建議是設置行高，但是這爲div中的所有行設置了相同的高度，這是我不想要的。有沒有一種方法可以在線條之間設置空格，而不必將所有線條設置爲同一高度並且不修改所包含的元素？如何在沒有設置行高的情況下設置div中的行之間的間距

在簡化的形式中，HTML內容看起來像這樣：

<div> 
    <div style="display: inline-block;...">variable stuff</div> 
    <div style="display: inline-block;...">variable stuff</div> 
    <div style="display: inline-block;...">variable stuff</div> 
    <div style="display: inline-block;...">variable stuff</div> 
    ... 
</div>

每個內div有不同的內容：不同的高度和寬度。

我可以設計所有內部div。實際上，我已經做到了這一點，並得到了我可以忍受的結果。但我很驚訝地發現，CSS沒有明顯的設置行間距的方法（即行之間的空間，而不是行的高度：我知道行高度，但它不是直接，行間距和（在這種情況下是不希望的）使所有線條具有相同高度的效果 - 即使線條中的所有元素都具有低高度的線條）。我很想知道是否有一種方法可以將行間距設置爲外部div的參數，而不需要設置行高。

我認爲它是行間距，但是另一種想法是在外部div的每一行上而不是整個外部div上的上下邊距，並且不會覆蓋頂部和底部邊距所有內部div（這是我現在所做的）或使所有行都處於同一高度（如行高）。

我可以想到的做的唯一方法就是不用重寫內部div的邊距，而是通過將每個div包裹在另一個div中，只是爲了設置一個公共邊距。如果我這樣做，兩個divs的利潤率就不會崩潰，我可以忍受。在這種情況下，所有內容都是div的情況下，這種方式已經足夠好了，但如果我混合了文本和div（即文本與div分開），則不起作用，在這種情況下，我會回來希望能夠找到一種方式指定行間距。

來源

2012-07-30 Ian

這隻能通過margin風格來完成。您不需要將每個包含的DIV與另一個DIV包裝在一起。只需使用STYLE標籤即可。

下面是一個例子。爲了演示目的，添加了邊框和着色。

<style> 
    #container  {width:30ex; outline:1px solid black; padding:0 .2em; background:white;} 
    #container>div {display:inline-block; margin:.2em 0; background:#fca;} 
</style> 
<div id="container"> 
    <div style="height:1em">variable</div> 
    <div style="height:5em">variable stuff variable</div> 
    <div style="height:2em">variable stuff</div> 
    <div style="height:1em">variable</div> 
    <div style="height:3em">variable stuff variable stuff</div> 
    <div style="height:1em">variable</div> 
    <div style="height:1em">variable</div> 
    <div style="height:1em">variable</div> 
    <div style="height:1em">variable</div> 
</div>

來源

2012-07-30 11:07:25 Jay

也可以用'border'完成，但'margin'更簡單。 – Jay 2012-07-30 11:09:23

風格的內部divs是我所做的，與什麼風格（邊緣，邊框或填充）的變化是傑伊，grillp和bkizer1都推薦。我搜索了很多小時，並沒有發現任何直接控制行間距的指示，而不是行高，所以我想就是這樣。 Jay提供了一個很好的例子，所以我標記了這個答案，但是要感謝所有人。 – Ian 2012-07-31 03:19:27

爲什麼不嘗試在您的P元素上使用CSS邊距或邊框設置？

來源

2012-07-30 02:24:34 grillp

我希望不必重寫所有包含的元素。應用於包含div的邊距和邊框不會影響div中行之間的間距。 – Ian 2012-07-30 02:33:11

對不起..剛剛編輯我的答案..'p'沒有顯示..我假設你的DIV包含一堆段落？ – grillp 2012-07-30 02:48:14

對不起，沒有段落（它們不能包含塊元素，即使包含的塊元素將顯示設置爲內聯塊）。我爲這個例子添加了一個例子和進一步的解釋，因爲我似乎沒有對自己說得很清楚 - 對此抱歉。 – Ian 2012-07-30 03:03:20

怎麼樣使用CSS填充屬性？例如：

padding:25px;

您還可以指定：填充右，填充，底部等

來源

2012-07-30 02:26:02 bkizer1

我試圖向外部div添加填充，但它不會影響div內部行之間的差距。我可以重寫所有包含的元素，但我希望有一種方法可以避免這種情況。 – Ian 2012-07-30 02:31:18

什麼是關於使用內嵌塊和每列的列是更多的div。

<div> 
    <div style="display: inline-block;"> 
    <div>variable stuff</div> 
    <div>variable stuff</div> 
    </div> 
    <div style="display: inline-block;"> 
    <div>variable stuff</div> 
    <div>variable stuff</div> 
    </div> 
</div>

來源

2013-01-21 20:58:13 Michael

如何在沒有設置行高的情況下設置div中的行之間的間距

回答

相關問題