Why a gap between ul li [duplicate] - html

Question

This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 6 years ago.
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>

Answer 1

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>

Answer 2

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

Answer 3

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;
}

Answer 4

Just add this into your code,
.list{
font-size:0;
}
.list li{
font-size:20px;
padding:0px 0px 0px 10px;
}