搜尋

首頁  >  文章  >  web前端  >  html怎麼去掉空格

html怎麼去掉空格

藏色散人
藏色散人原創
2021-04-12 10:21:544311瀏覽

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怎麼去掉空格

############################## ##################【推薦學習：###HTML影片教學###】######

以上是html怎麼去掉空格的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：教你一招實現“代碼雨”下一篇：教你一招實現“代碼雨”

相關文章

看更多