许多内嵌块元素的边距

问题描述：

我有很多图像在固定宽度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

请张贴例如HTML和CSS –

@Paulie_D看看在这个问题 – Chris

底部的链接我敢肯定，你在这里待得够久知道一个小提琴ISN;吨通常就足够了。发布HTML/CSS允许用户查看基本问题以防万一小提琴被删除。：http://stackoverflow.com/help/how-to-ask –

答

DEMO

更改div的padding这样：

填充：10px的为5px 0 10px的;

什么凯说 - 打我吧:) – Ted

答

一个快速的方法可以是简单地证明与右的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; 
}

这看起来不错，但有趣的是，我不能让它与我的CSS/HTML工作 – Chris

答

重新排列填充为您的div和设置图像作为垂直对齐：顶部或底部以擦除其下的间隙。

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/

否则派遣margin和padding，看看如何处理白色空间（代码没有缩进，使用注释，字体大小为0，....）http://jsfiddle.net/LnHDc/4或http://jsfiddle.net/LnHDc/5或http://jsfiddle.net/LnHDc/6。你有很多方法来处理这个，甚至浮动图像。

这仍然给羊和div之间的更大的差距在右边比在左边 – Chris

看到我的更新和新的链接到jsfiddle :) –

如果你画一个网格后面，它是更容易检查出它的外观：http://jsfiddle.net/LnHDc/12/ –

许多内嵌块元素的边距

相关推荐