Why a gap between ul li

Question

In the following code, I am not able to understand that why is there a small margin between the green li's Home , Products , Services , About Us, Contact

I have set the margin and padding to 0px in both .ul and .li properties. Then why is there a gap between the green li's?

*{
    box-sizing:border-box;
}


html,body {
 margin: 0px;
 height: 100%;
 width: 100%;
 left: 0px;
 top: 0px;
 background-color: rgba(173,192,241,1);
    }

.wrapper {
 height: 725px;
 max-width: 960px;
 margin-left: auto;
 left: 0px;
 top: 0px;
 /* [disabled]background-color: rgba(15,26,155,1); */
 margin-right: auto;
 position: relative;
}



.topimage {
 width: 100%;
 max-width: 960px;
 height: 100%;
 max-height: 175px;
 /* [disabled]background-color: rgba(0,102,204,1); */
 position: absolute;
 /* [disabled]border: thin solid rgba(255,0,0,1); */
}

.topimage img{
 max-width: 100%;
 max-height: 100%;
 /* [disabled]margin-bottom: -9px; */
 display: block;
 margin-right: auto;
 margin-left: auto;
 border-radius: 15px 15px 0px 0px;
}

.menu {
 background-color: rgba(15,26,155,1);
 height: 100%;
 max-height: 50px;
 max-width: 960px;
 position: relative;
 top: 175px;
}
.list {
 color: rgba(0,0,0,1);
 text-decoration: none;
 margin-right: auto;
 margin-left: auto;
 background-color: rgba(255,0,0,1);
 padding: 0px;
}

.list li {
 display: inline-block;
 margin-right: 0px;
 margin-left: 0px;
 width: auto;
 text-align: center;
 background-color: rgba(204,255,0,1);
 position: relative;
 padding: 0px;
}

.content {
 width: 100%;
 height: 500px;
 background-color: rgba(20,35,214,1);
 position: relative;
 top: 175px;
 padding-right: 0.5%;
 padding-left: 0.5%;
}

.leftcontent {
 background-color: rgba(210,238,252,1);
 float: left;
 height: 100%;
 max-height: 500px;
 width: 100%;
 max-width: 85%;
 top: 0px;
 position: relative;
 border-left-color: rgba(205,205,205,1);
 /* [disabled]margin-left: 0.3%; */
}

.rightcontent {
 background-color: rgba(51,177,236,1);
 float: right;
 height: 100%;
 max-height: 500px;
 width: 100%;
 max-width: 15%;
 position: relative;
 top: 0px;
 /* [disabled]margin-right: 0.3%; */
}

.footer {
 
}

<div class="wrapper">
<div class="topimage">

</div>
<div class="menu">
<ul class="list">
<li>Home</li>
<li>Products</li>
<li>Services</li>
<li>About Us</li>
<li>Contact</li>
</ul>
</div>

<div class="content">
<div class="leftcontent">
</div>
<div class="rightcontent">
</div>
</div>

</div>

This is an old known issue, have you search before asking? – Jun 20 '16 at 11:02 — , Jun 20 '16 at 11:02

score 0 · Answer 1 · answered Jun 20 '16 at 10:57

If you have no new lines between the list elements then it works. So you could put all on one line (see snippet) or add font-size: 0; to the <ul>

ul {font-size:0;}

*{
    box-sizing:border-box;
}


html,body {
 margin: 0px;
 height: 100%;
 width: 100%;
 left: 0px;
 top: 0px;
 background-color: rgba(173,192,241,1);
    }

.wrapper {
 height: 725px;
 max-width: 960px;
 margin-left: auto;
 left: 0px;
 top: 0px;
 /* [disabled]background-color: rgba(15,26,155,1); */
 margin-right: auto;
 position: relative;
}



.topimage {
 width: 100%;
 max-width: 960px;
 height: 100%;
 max-height: 175px;
 /* [disabled]background-color: rgba(0,102,204,1); */
 position: absolute;
 /* [disabled]border: thin solid rgba(255,0,0,1); */
}

.topimage img{
 max-width: 100%;
 max-height: 100%;
 /* [disabled]margin-bottom: -9px; */
 display: block;
 margin-right: auto;
 margin-left: auto;
 border-radius: 15px 15px 0px 0px;
}

.menu {
 background-color: rgba(15,26,155,1);
 height: 100%;
 max-height: 50px;
 max-width: 960px;
 position: relative;
 top: 175px;
}
.list {
 color: rgba(0,0,0,1);
 text-decoration: none;
 margin-right: auto;
 margin-left: auto;
 background-color: rgba(255,0,0,1);
 padding: 0px;
}

.list li {
 display: inline-block;
 margin-right: 0px;
 margin-left: 0px;
 width: auto;
 text-align: center;
 background-color: rgba(204,255,0,1);
 position: relative;
 padding: 0px;
}

.content {
 width: 100%;
 height: 500px;
 background-color: rgba(20,35,214,1);
 position: relative;
 top: 175px;
 padding-right: 0.5%;
 padding-left: 0.5%;
}

.leftcontent {
 background-color: rgba(210,238,252,1);
 float: left;
 height: 100%;
 max-height: 500px;
 width: 100%;
 max-width: 85%;
 top: 0px;
 position: relative;
 border-left-color: rgba(205,205,205,1);
 /* [disabled]margin-left: 0.3%; */
}

.rightcontent {
 background-color: rgba(51,177,236,1);
 float: right;
 height: 100%;
 max-height: 500px;
 width: 100%;
 max-width: 15%;
 position: relative;
 top: 0px;
 /* [disabled]margin-right: 0.3%; */
}

.footer {
 
}

<div class="wrapper">
<div class="topimage">

</div>
<div class="menu">
<ul class="list">
<li>Home</li><li>Products</li><li>Services</li><li>About Us</li><li>Contact</li>
</ul>
</div>

<div class="content">
<div class="leftcontent">
</div>
<div class="rightcontent">
</div>
</div>

</div>

The single-line thing seems like a very hacky solution. And very un-scalable for larger amounts of list elements. — Alec, Jun 20 '16 at 10:59
Agreed. That's why i suggested a better solution using `font-size:0;`. — Ben Rhys-Lewis, Jun 20 '16 at 11:07
Hello Ben. Thanks for your answer. Could you please tell me what changes you did to the above code? Am not able to identify :( — code_easy, Jun 20 '16 at 11:10
Or just not use `display: inline-block;` at all, as others have said. And just use `float:left;` instead. Up to you :) hope that helps. — Ben Rhys-Lewis, Jun 20 '16 at 11:33

Mohammad Usman · Answer 2 · 2016-06-20T11:08:31.953

0

You can remove space created by inline-block element as with following trick. Or you can use float instead of inline-block.

.list {
  letter-spacing: -4px;
  font-size: 0;
}

.list li {
  display: inline-block;
  vertical-align: top;
  letter-spacing: 0;
  font-size: 14px;
}

Or you can use float:

.list {
  overflow: hidden;
}

.list li {
  float: left;
}

edited Jun 20 '16 at 11:08

answered Jun 20 '16 at 11:01

Mohammad Usman

37,952
20
92
95

score 0 · Answer 3 · answered Jun 20 '16 at 11:02

0

Try this -

.list li {
    float: left;
    list-style: none;
    width: auto;
    text-align: center;
    background-color: rgba(204,255,0,1);
    position: relative;
}

Replace with above css with your existing .list li class

answered Jun 20 '16 at 11:02

Rohit Suthar

3,528
1
42
48

Hello, i used float:left on li , and I was able to get rid of space. However, the moment I used float:left on li, the background color of the `.list` (which is red) disappeared. Why is that? – code_easy Jun 20 '16 at 11:06

score 0 · Answer 4 · answered Jun 20 '16 at 11:28

0

Just add this into your code,

.list{
font-size:0;
}
.list li{
font-size:20px;
padding:0px 0px 0px 10px;
}

answered Jun 20 '16 at 11:28

frnt

8,455
2
22
25

Why a gap between ul li

4 Answers4