奇怪的錯誤與邊境/輪廓/保證金/填充

HTML（3X次）：奇怪的錯誤與邊境/輪廓/保證金/填充

<div class="scream"> 
    <div class="author"> 
    <img src="avatars/dagrevis.png" alt="" title="daGrevis" /> 
    </div> 
    <div class="data"> 
    <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</span> 
    </div> 
    <div class="clearer"></div> 
</div>

CSS：

.scream { 
    background: #F4F4F4; 
    width: 944px; height: 48px; 
} 

.scream .author { 
    float: left; 
} 

.scream .data { 
    float: left; 
} 

.clearer { clear: both; }

這是怎麼看我的瀏覽器：

My situation.

如您所見，height設置爲48px。圖像大小也是48px。這是怎麼回事，我沒有看到每個div.scream在單獨的行？例如，如果我將height設置爲50px，所有作品！在我看來，這是因爲有某種邊框/輪廓/邊距/填充物毀了我的生活。不幸的是，在FireBug中，我沒有看到類似的東西......

來源

2011-06-18 daGrevis

enter image description here

的底部邊緣圖像默認與線框的基線（灰線）對齊。基線以下的空間（也稱爲「下降空間」）是導致您的問題的原因。有關詳細信息，請參閱Eric Meyer的this article。

要修復它，添加此規則：

.scream .author img { 
    display: block; 
}

或者這一個：

.scream .author img { 
    vertical-align: bottom; 
}

來源

2011-06-18 22:29:52 melhosseiny

如果你玩弄了一下DOM檢查器，你會發現.author出現了52px左右的高度。額外的4px似乎來自line-height。設置line-height以0：

.scream .author { 
    float: left; 
    line-height: 0; 
}

修復的佈局：http://jsfiddle.net/ambiguous/8KzdD/

或者，您也可以浮動圖像向左還有：

.scream .author { 
    float: left; 
} 
.scream .author img { 
    float: left; 
}

將從局部流動去除圖像並使line-height不相關：http://jsfiddle.net/ambiguous/8KzdD/1/

另一種選擇是溝清除<div>和使用overflow:hidden在外<div>：

.scream { 
    background: #F4F4F4; 
    width: 944px; 
    height: 48px; 
    overflow: hidden; 
}

這將使<div class="author">與其52px高度但效果不會視覺可見：http://jsfiddle.net/ambiguous/8KzdD/2/

來源

2011-06-18 22:15:46

奇怪的錯誤與邊境/輪廓/保證金/填充

回答

相關問題