解決行內元素之間的間隔bug問題

阿新 • • 發佈：2019-02-07

解決行內元素中間有空隙得意
產生原因：換行符、tab、空格產生空隙
解決方法：
1.元素寫成一行
存在問題：程式碼混亂

<span href="#" class="page-prev">&lt;</span><span href="#" class="page-current">1</span><a href="#">2</a><a href="#">3</a>

2.在根容器裡設定font-size:0; 子容器裡設定font-size:14px;（推薦）

因為 font-size 是一個會繼承的屬性，當父容器定義了這個屬性，下面的子元素（孫元素）都會繼承這個屬性。視訊的例子中，當為外面容器div新增 font-size:0 的時候，div下面的所有 span 和 a 標籤都繼承了這個樣式，字型大小變為了 0px，所以看不到任何數字內容了；當為其它類新增 font-size:14px 後，這個屬性覆蓋了父容器繼承下來的屬性（CSS的後來居上原則），因此 div 下的 span 和 a 標籤裡的數字內容就恢復了正常。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分頁頁碼</title>
    <style>
        .page-normal{
            color:#ff6500;
            text-align: center;
            font-size:0;
            margin-top:200px;
        }
        .page-normal 
 a,.page-normal .page-current,.page-normal .page-prev{
            padding:5px 7px;
            font-size:14px;
            margin-left:10px;
        }
        .page-normal a{
            border:1px solid #ff9600;
            color:#ff6500;
            text-decoration:none;
        }
        .page-normal 
 a:hover{
            border:1px solid #ff6500;
            background-color:#ffbe94;
        }
        .page-normal .page-current{
            border:1px solid #ff6500;
            color:#ff6500;
            background-color:#ffbe94;
        }
        .page-normal .page-prev{
            border:1px solid #ffe3c6;
            color:#ffe3c6;
        }
        .ellipsis{
            font-size:14px;
            border:none;
            margin-left: 8px;
        }

    </style>
</head>
<body>
    <div class="page-normal">
        <span href="#" class="page-prev">&lt;</span>
        <span href="#" class="page-current">1</span>
        <a href="#">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
        <a href="#">5</a>
        <a href="#">6</a>
        <a href="#">7</a>
        <span class="ellipsis">...</span>
        <a href="#">200</a>
        <a href="#">201</a>
        <a href="#">&gt;</a>
    </div>
</body>
</html>

解決行內元素之間的間隔bug問題

解決行內元素之間的間隔bug問題

去除行內元素之間的間隙

如何解決行內元素換行符產生的間隙

行內元素之間存在間距的問題

行內元素與塊級元素以及之間的轉換

【109】行內元素間的換行符導致出現空隙。Vue用刪除標籤間換行符解決。

塊級元素和行內元素

行內元素

css學習體會之——塊級元素，行內元素長寬設置

塊元素和行內元素

HTML行內元素、塊狀元素、行內塊狀元素的區別

行內元素和塊級元素

html中的行內元素和塊級元素有哪些。

行內元素轉為塊級元素的方法

7.27 行內元素和塊狀元素 * 精靈圖

深度理解CSS中塊級元素與行內元素的區別（個人易錯點）

css基礎行內元素塊級元素

行內元素和塊級元素水平及垂直居中

微信小程序布局之行內元素和塊級元素

【輕松前端之旅】HTML的塊元素、行內元素和空元素

解決行內元素之間的間隔bug問題

相關推薦