display:inline-block的間隙問題和解決辦法

時間 2019-11-30

標籤 display inline block 間隙問題解決辦法欄目 CSS 简体版

原文原文鏈接

一、display:inline-block在水平方向的間隙；css

代碼以下：blog

<style type="text/css">
        *{margin:0; padding:0;}
        .test{width:600px; border:1px blue solid;}
        .test div{width:100px; height:100px; display:inline-block;background:blue;} 
    </style>
</head>
<body>
<div class="test">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
</body>


效果以下：

四個div之間有小間距，解決辦法：讓水平間隙消失就是在父級上加font-size:0;讓垂直間隙消失，就在子元素上加vertical-align:bottom;就不貼代碼了，
若是子標籤內加上任意文字，則display:inline-block元素不會生成垂直方向有空白！ 下面是解決好的效果：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。