html怎麼去掉空格-html教學-PHP中文網

當使用inline-block時，HTML元素之間的空白會顯示在頁面上，為了保持程式碼的美觀，不建議使用全部寫在一行內或影響美觀的方法。

首頁

web前端

html教學

html怎麼去掉空格

藏色散人

Apr 12, 2021 am 10:21 AM

html

html去掉空格的方法：先開啟對應的HTML程式碼檔案；然後透過在父元素上設定「font-size:0;」樣式即可移除html程式碼標籤之間換行產生的空格。

html怎麼去掉空格

本文操作環境：windows7系統、HTML5&&CSS3版、Dell G3電腦。

如何去除html程式碼標籤之間換行產生的空格

當使用inline-block時，HTML元素之間的空白會顯示在頁面上，為了保持程式碼的美觀，不建議使用全部寫在一行內或影響美觀的方法。

建議方法：在父元素上設定font-size: 0;

範例：

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body {            margin: 0;            padding: 0;        }
        p {            height: 41px;            border-top: 4px solid red;            border-bottom: 1px solid gray;        }
        a {            display: inline-block;            height: 41px;            text-align: center;            line-height: 41px;            text-decoration: none;            padding: 0px 5px;            background-color: red;            font-size: 14px;            font-family: 楷体;        }
        .shouye {            margin-left: 200px;        }
        .shouye:hover {            background-color: gray;        }
    </style></head><body>
    <p>
        <a class="shouye" href="#">设为首页</a>
        <a href="#">手机新浪网</a>
        <a href="#">移动客户端</a>
    </p></body></html>

登入後複製

效果預覽：
html怎麼去掉空格

修改後程式碼：

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body {            margin: 0;            padding: 0;        }
        p {            font-size: 0;/*关键代码*/
            height: 41px;            border-top: 4px solid red;            border-bottom: 1px solid gray;        }
        a {            display: inline-block;            height: 41px;            text-align: center;            line-height: 41px;            text-decoration: none;            padding: 0px 5px;            background-color: red;            font-size: 14px;            font-family: 楷体;        }
        .shouye {            margin-left: 200px;        }
        .shouye:hover {            background-color: gray;        }
    </style></head><body>
    <p>
        <a class="shouye" href="#">设为首页</a>
        <a href="#">手机新浪网</a>
        <a href="#">移动客户端</a>
    </p></body></html>

登入後複製

效果預覽：
html怎麼去掉空格