怎么在CSS中删除内联块元素之间的空间

魁首哥

作者

这篇文章主要介绍了怎么在CSS中删除内联块元素之间的空间的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇怎么在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>

<h3>Normal Behavior</h3>

<ul>

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

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

</ul>

<hr>

<h3>After Removing Spaces</h3>

<ul>

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

</ul>

</body>

</html>

关于“怎么在CSS中删除内联块元素之间的空间”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“怎么在CSS中删除内联块元素之间的空间”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注恰卡编程网行业资讯频道。

发布于 2022-03-13 23:41:45

海报