<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>css inline-block spacing how to solve</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
at the {
width: 100px;
height: 40px;
display: inline-block;
border: 1px solid red;
text-align: center;
line-height: 40px;
}
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>XML</li>
<li>JSON</li>
</ul>
</body>
</html>
The browser shows:
inline-block has spacing by default
It can be written like this:
<body>
<ul>
<li>
HTML</li><li>
CSS</li><li>
JavaScript</li><li>
JSON</li>
</ul>
</body>
The browser shows:
The reason for the white space between elements is the space between the label segments. Therefore, if you remove the space in the HTML, the natural space will be gone.