为什么 <li> 之间有空格？

Question

为什么所有这些 <li> 的前面都有一个 space 请帮助。

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 Fiddle: 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>

parent- font-size: 0; child - 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>

为什么 <li> 之间有空格？

Why are there spaces between <li>'s?

html

css

margins