inline-block 去除間隙

時間 2019-11-18

標籤 inline block 去除間隙简体版

原文原文鏈接

inline-block元素在佈局時會給咱們帶來不少方便，但它有一個明顯的bug,就是inline-block元素間會有一個4px的間隙（有的瀏覽器多是8px）。css

如圖所示： html

解決辦法：瀏覽器

給父元素設置font-size:0框架

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="author" content="Chomo"/>
    <link rel="start" href="http://www.14px.com" title="Home"/>
    <title>利用box-sizing實現div仿框架</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .parent{
            font-size: 0;
        }
        div{
            display: inline-block;
        }
        .test1{
            width: 600px;
            height: 58px;
            background: #ff7d00;
            font-size: 14px;
        }
        .test2{
            width: 500px;
            height: 40px;
            background: #0066cc;
            font-size: 14px;
        }
        .test3{
            width: 700px;
            height: 60px;
            background: #7d7d7d;
            font-size: 14px;
        }
    </style>
</head>
<body>
<div class="parent">
    <div class="test1">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div>
    <div class="test2">BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</div>
    <div class="test3">CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC</div>
</div>
</body>
</html>

相關標籤/搜索

每日一句

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