如何去除inline-block的默認間距

時間 2020-05-06

標籤如何去除 inline block 默認間距简体版

原文原文鏈接

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>css inline-block間距怎麼解決</title>
    <style type="text/css">
     * {
       margin: 0;
       padding: 0;
     }

     li {
       width: 100px;
       height: 40px;
       display: inline-block;
       border: 1px solid red;
       text-align: center;
       line-height: 40px;
     }
    </style>
  </head>
  <body>
     <ul>
       <li>HTML</li>
       <li>CSS</li>
       <li>JavaScript</li>
       <li>XML</li>
       <li>JSON</li>
     </ul>
  </body>
</html>

　　瀏覽器顯示：css

inline-block默認有間距html

能夠這樣寫：瀏覽器

<body>
     <ul>
       <li>
       HTML</li><li>
       CSS</li><li>
       JavaScript</li><li>
       JSON</li>
     </ul>
  </body>

　　瀏覽器顯示:code

元素間留白間距出現的緣由就是標籤段之間的空格，所以，去掉HTML中的空格，天然間距就木有了。htm

相關標籤/搜索