如何去除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