圖像之間的差距？

http://users.telenet.be/prullen/portfolio.html

我試過我的圖片設置爲display：block -

display: block; 
margin: 0; 
padding: 0;

，但沒有奏效。

我也嘗試添加

visiblity:hidden;overflow:hidden;height:0;font-size:1px;line-height:0px

到

<div style="clear:both"></div>

但這些工作。

有誰知道原因可能是什麼？如果可能，清除：兩者應該保持兼容。

來源

2012-09-07 Wesley

爲given page快速修復：添加float:left到.item CSS塊。

來源

2012-09-07 18:59:45 alexbusu

或者更好的方法是將'display：inline-block;'放到同一個'.item'元素中。但是你需要保持'width：100％;'css屬性。 – alexbusu

爲什麼display：inline-block更好？我們可以同時擁有（回退）嗎？ – Wesley

您必須清除浮動元素後的浮標（某些情況下）。看看[這裏]（http://css-tricks.com/all-about-floats/）。 – alexbusu

儘量把他們放在一個div類名 '.row'，並設置行高爲0

HTML：

<div class="row"> 
    <img src="img1.png" /> 
    <img src="img2.png" /> 
    <img src="img3.png" /> 
</div>

CSS：

.row { 
    line-height: 0; 
}

來源

2012-09-07 18:55:34

你應在第一個<div>之後加上<div style="clear: both;" />。

Fixed code

你也可以將其刪除：

<div style="clear:both;visiblity:hidden;overflow:hidden;height:0;font-size:1px;line-height:0px;"></div>

來源

2012-09-07 18:55:42

似乎這並不做任何事情（固定錯字太多）。 – Wesley

我編輯了我的答案它現在可用。 :) –

謝謝，在我的生活中嘗試過這一點，但沒有工作，然後注意到你也增加了一個浮點到描述類。 – Wesley

如果你在談論的差距在圖像之間的垂直間隙，那麼你的問題是在該<p>上邊距第二.item .description。這是縮小差距的因素。

.description p { margin-top: 0 }

或者：

<div class="description"> 
    <p class="first">Description goes here.</p> 
</div> 

.description .first { margin-top: 0 }

來源

2012-09-07 18:57:55 tgormtx

工作，泰克。但有沒有可能找到div元素中的第一個元素，該元素具有margin-top，並將其設置爲零？因爲它可能並不總是一個div。 – Wesley

我相信.description：首先，但它不符合跨瀏覽器。您可以隨時使用class =「first」 – tgormtx

做你的重置CSS中...

* {填充：0;保證金：0; }

來源

2012-09-07 18:59:45 Brant

您的段落標記是什麼導致上下的差距。對於第（鉻），默認是：

p { 
display: block; 
-webkit-margin-before: 1em; 
-webkit-margin-after: 1em; 
-webkit-margin-start: 0px; 
-webkit-margin-end: 0px; 
}

簡單的頁邊距設置爲0，將解決你的問題：

p { margin: 0px; }

來源

2012-09-07 18:59:49 altschule

的<p>標籤的第二個項目是推動整個DIV下降1因爲它的默認頂部和底部邊距通常是1em。當您將其邊距設置爲零時，這些項目將排列在彼此之上。您可能需要設置<p>或將<p>設爲margin-top: 0px。

來源

2012-09-07 19:05:58

好吧，測試一個作品。

刪除clear:both div並將浮動樣式設置爲第一項。

不好：

<div class="item"> 
    [...] 
    <div style="clear:both;"></div> 
</div> 
<div class="item" style="border:red;"> 
    [...] 
</div>

好：

<div class="item" style="float:left;"> 
    [...] 
</div> 
<div class="item" style="border:red;"> 
    [...] 
</div>

來源

2012-09-07 19:22:15

圖像之間的差距？

回答

相關問題