Several Methods to remove the inline-block element gap, inlineblock gap
<! Doctype html>
<Html>
<Head>
<Meta charset = "UTF-8">
<Meta name = "Author" content = "Hu Chao">
<Title> super Hu </title>
<Style>
# A1 {
List-style: none;
Background: green;
Text-align: center;
Padding: 10px;
}
# A1 li {
Display: inline-block;
Background: orange;
}
# A2 {
List-style: none;
Background: green;
Text-align: center;
Padding: 10px;
}
# A2 li {
Display: inline-block;
Background: orange;
}
# A3 {
List-style: none;
Background: green;
Text-align: center;
Padding: 10px;
Font-size: 0px;/* Set font-size: 0px for the parent element; set the child element again */
}
# A3 li {
Display: inline-block;
Background: orange;
Font-size: 16px;
}
# A4 {
List-style: none;
Background: green;
Text-align: center;
Padding: 10px;
}
# A4 li {
Display: inline-block;
Background: orange;
}
</Style>
</Head>
<Body>
<Ul id = "a1">
<Li> item1
</Li> <! --
--> <Li> item2 <! -- Annotation Method for understanding -->
</Li> <li> item3
</Li> <li> item4
</Li> <li> item5
</Li>
</Ul>
<Ul id = "a2">
<Li> item1
</Li> <li> item2 <! -- Makes no gaps between </li> <li> -->
</Li> <li> item3
</Li> <li> item4
</Li> <li> item5
</Li>
</Ul>
<Ul id = "a3">
<Li> item1 <! -- Set the parent element to font-size: 0px; set the child element again -->
</Li>
<Li> item2
</Li>
<Li> item3
</Li>
<Li> item4
</Li>
<Li> item5
</Li>
</Ul>
<Ul id = "a4">
<Li> item1
<Li> item2
<Li> item3
<Li> item4
<Li> item5
</Li> <! -- Remove the end tag -->
</Ul>
</Body>
</Html>