html中元素之間的空格

考慮我在html頁面中有9個IMG。當瀏覽器的視口更改時，它們將重新排列在任意數量的行或單元格中。我想要的是，它們之間的空間是5，但不在最後一行或一列之後沒有保證金。html中元素之間的空格

頁邊距不適合，因爲它也會提供最後一行或列邊距。

2011-08-21 Ali

你必須添加一個類的最後一個圖像覆蓋的空白。這將工作跨瀏覽器。 – Shef

你能提供你的HTML代碼嗎？ –

在CSS中使用：last-child或first-child指令。例如：

#images 
{ 
    padding-left: 10px; 
    padding-right: 10px; 
} 
#images:last-child, #images:first-child 
{ 
    padding: 0px; 
}

如果您使用PHP或其他服務器端腳本語言生成HTML輸出，你應該更好地分配ID（或類）的第一和最後一個元素了，而不是使用僞選擇。

如果你真的想，你也可以將兩者結合起來。

來源

2011-08-21 11:10:48 ComFreek

僞類選擇器不適用於所有瀏覽器。 :) – Shef

但在主流瀏覽器中支持：http://www.w3schools.com/cssref/sel_firstchild.asp – ComFreek

@ user603003不，它不是：http://reference.sitepoint.com/css/pseudoclass- lastchild＃compatibilitysection（雖然它是最符合標準的解決方案） – feeela

.images{ 
    padding: 0; 
    margin: 0; 
    border: 0; 
}

我知道你可能已經使用螢火蟲，發現沒有邊界，但我有同樣的問題，增加border: 0;消除了所有的間距完全無需從代碼中刪除回車。

希望它可以幫助別人！

來源

2013-01-05 17:28:38

您可以編寫代碼來顯示您想要的邊距的一些圖像行，然後在圖像上不需要應用邊距，可以鏈接一個類並提供不同的樣式。您也可以使用:not僞元素。

HTML

<div class="image-margin"> 
<img src="whatyouwant"> 
<img src="whatyouwant"> 
<img src="whatyouwant"> 
<img src="whatyouwant" class="image-no-margin"> 
</div>

CSS

.image-no-margin { 
margin:0px 
} 
.image-margin img:not(.image-no-margin) { 
0px 5px 5px 0px; //5px top and 5px left 
}

該代碼表示你申請保證金0像素與一流的形象，沒有利潤的，你所定義的其他樣式的圖像（以5px的保證金底部和右）所有其他圖像（不是圖像無邊距）。

僞元件:not僅受Internet Explorer 9及最新版本的Firefox，Chrome，Safari和Opera的支持。您可以使用名爲selectivizer的JavaScript庫來添加對Internet Explorer 6+的支持。

你只需要下載庫並將它包含在您的網頁的head：

<script type="text/javascript" src="[JS library]"></script> 
<!--[if (gte IE 6)&(lte IE 8)]> 
    <script type="text/javascript" src="selectivizr.js"></script> 
    <noscript><link rel="stylesheet" href="[fallback css]" /></noscript> 
<![endif]-->

來源

2013-01-05 18:03:44 Fabio

html中元素之間的空格

回答

相關問題