代码之家  ›  专栏  ›  技术社区  ›  Chris

许多内联块元素的边距

  •  1
  • Chris  · 技术社区  · 12 年前

    我有很多照片 inline-block 固定宽度div内的显示类型。

    图像的边距为 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

    3 回复  |  直到 12 年前
        1
  •  0
  •   kei    12 年前

    DEMO

    更改您的 div 的 padding 为此:

    填充:10px 5px 0 10px;

        2
  •  0
  •   SW4    12 年前

    一种快速的方法可以是简单地证明与 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;
    }
    
        3
  •  0
  •   G-Cyrillus    12 年前

    重新排列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/

    否则,分派边距和填充,并查看如何处理空白(代码不缩进,使用注释,字体大小为0,……) http://jsfiddle.net/LnHDc/4 或 http://jsfiddle.net/LnHDc/5 或 http://jsfiddle.net/LnHDc/6 . 你有很多方法来处理这个,甚至是漂浮的图像。