Why are there spaces between
's?

Question

Why is there a space before all these <li>'s Please Help.

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/

Which browser are you using? Looks fine in Chrome to me (no spaces) — DA., May 25 '15 at 19:30
The best and cleanest way is to clear out the HTML whitespace using ``. http://jsfiddle.net/jy4ojyyt/2/ — Delto, May 25 '15 at 19:31
I am seeing no difference between the two fiddles posted (1st in the question & 2nd in the @RyanS answer). Which browser you are using? — Prateek, May 25 '15 at 19:32
@DobbyIsDead well, you may need to post a screen shot, as it appears we're not all seeing what you are. — DA., May 25 '15 at 19:42

score 1 · Answer 1 · answered May 25 '15 at 19:29

1

Inline-block elements render spaces between them. You can either put the li's on the same line or do some of your styling.

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>

answered May 25 '15 at 19:29

RyanS

3,455
1
21
36

how would I do this and have the code still look nice? – abaft May 25 '15 at 19:32
Check out this answer http://stackoverflow.com/a/5078297/1310604 – RyanS May 25 '15 at 19:34

Dmitriy · Accepted Answer · 2015-05-25T19:36:09.880

use 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>

The advantage of `` is that you can still have multiple lines. If you only use a single line, you can just remove the comments. — Oriol, May 25 '15 at 19:34

Why are there spaces between 's?

2 Answers2

Why are there spaces between
's?