Fiddle

Question

我有很多图像在固定宽度div内有inline-block显示类型。

图像的边距为0 5px 5px 0，这意味着当你有很多图像效果时，你会获得很好的桌面效果。

不幸的是，这会产生一种副作用，其中包含div在图像与其底部和右侧的填充之间有额外的空间。

我该如何解决这个问题？

CSS

div{
    padding: 10px;
    max-width: 191px;
    background: #ddd;
}
img {
    max-width: 30px;
    min-height: 23px;
    margin:0 5px 5px 0;

    display: inline-block;
}

HTML

<div>
    <img src="..." />
    <img src="..." />
    <img src="..." />
    <img src="..." />
</div>

Fiddlesis

Answer 1

快速方法可以简单地证明与auto的边距对齐，左右和垂直对齐中间：

Fiddle

div{
    padding: 10px 10px 5px;
    max-width: 191px;
    background: #ddd;
    text-align:justify;
}
img {
max-width: 30px;
min-height: 23px;
    margin:0 auto 5px auto;
    vertical-align:middle;    
    display: inline-block;
}

Answer 2

重新排列div的填充并将图像设置为vertical-align：top或bottom以消除其下的间隙。

div{
    padding: 10px 10px 5px;
    max-width: 191px;
    background: #ddd;
}
img {
max-width: 30px;
min-height: 23px;
    margin:0 5px 5px 0;
    vertical-align:top;      
    display: inline-block;
}

http://jsfiddle.net/LnHDc/1/

否则调度边距和填充，看看如何处理空格（代码没有缩进，使用注释，字体大小为0，......）http://jsfiddle.net/LnHDc/4或http://jsfiddle.net/LnHDc/5或{ {3}}。你有很多方法可以解决这个问题，即eeven浮动图像。

Answer 3

DEMO

将div的{{1}}改为：

填充：10px 5px 0 10px;

许多内联块元素的保证金

3 个答案:

Fiddle