为什么<li>＆＃39;之间有空格？

Question

为什么在所有这些<li>之前都有空格请帮忙。

HTML

<div class="links">
    <ul>
        <li><a href="page1.html">Page 1</a></li>
        <li><a href="page2.html">Page 2</a></li>
        <li><a href="page3.html">Page 3</a></li>
    </ul>
 </div>

CSS

.links ul{
    display: inline;
}
.links{
    display: block;
}
.links li{
    display: inline;
}
.links a{
    display: inline-block;
    width: 290px;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    border: 1px solid #000;
}

JS小提琴：http://jsfiddle.net/jy4ojyyt/

Answer 1

内联块元素在它们之间渲染空格。你可以将li放在同一条线上，也可以做一些造型。

http://jsfiddle.net/jy4ojyyt/1/

<div class="links">
    <ul>
        <li><a href="page1.html">Page 1</a></li><li><a href="page2.html">Page 2</a></li><li><a href="page3.html">Page 3</a></li>
    </ul>
</div>

Answer 2

使用Comments <!---->

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.links ul{
    display: inline;
}
.links{
    display: block;
}
.links li{
    display: inline;
}
.links a{
    display: inline-block;
    width: 290px;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    border: 1px solid #000;
}

<div class="links">
<ul>
    <li><a href="page1.html">Page 1</a></li><!--
--><li><a href="page2.html">Page 2</a></li><!--
--><li><a href="page3.html">Page 3</a></li>
</ul>
</div>

父母 - font-size: 0; 孩子 - font-size - XXpx

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.links ul {
    display: inline;
}
.links {
    display: block;
    
}
.links li {
    display: inline;
    font-size: 0;
}
.links a {
    display: inline-block;
    width: 290px;
    text-align: center;
    padding-top: 10px;
    font-size: 16px;
    padding-bottom: 10px;
    border: 1px solid #000;
}

<div class="links">
    <ul>
        <li><a href="page1.html">Page 1</a>
        </li>
        <li><a href="page2.html">Page 2</a>
        </li>
        <li><a href="page3.html">Page 3</a>
        </li>
    </ul>
</div>