如何在CSS中删除内联块元素之间的空间

CSS的display与所述值属性inline-block是用于控制尺寸以及非常有用的margin和padding所述的内联元素。

但是，display: inline-block;在HTML代码中使用空格时，会在屏幕上创建一些可视空间。但是您可以使用以下简单的方法来摆脱它。

解决方案1：删除元素之间的空间

例试试这个代码»

<!DOCTYPE html>

<head>

<title>Removing Extra Space Between the Elements</title>

<style>

ul {

padding: 0;

list-style: none;

}

ul li {

display: inline-block;

background: #ffa500;

padding: 5px 20px;

}

</style>

</head>

<body>

<h2>Normal Behavior</h2>

<ul>

<li><a href="#">About</a></li>

<li><a href="#">Contact</a></li>

</ul>

<hr>

<h2>After Removing Spaces</h2>

<ul>

<li><a href="#">Home</a></li><li><a href="#">About</a></li><li><a href="#">Contact</a></li>

</ul>

</body>

</html>

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h61101.shtml