051_元素之间空白间隙解决方案

最新推荐文章于 2023-10-25 20:59:03 发布

自由与束缚JavaJavaScript

最新推荐文章于 2023-10-25 20:59:03 发布

阅读量317

点赞数 1

分类专栏： css学习

本文链接：https://blog.csdn.net/aihiao/article/details/118210663

版权

css学习专栏收录该内容

52 篇文章 0 订阅

订阅专栏

1. 元素li和li之间, 以及多个图片直接会有一段空白的, 空白符会造成元素显示有间隙。消除间隙就不能有空白符。不留空白代码格式又显得糟糕。

2. 我们有消除间隙小窍门, 在元素的父容器中设置: font-size: 0; 也可以消除间隙的哦。

3. 例子

3.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>元素之间空白间隙解决方案</title>

		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			.site-doc-icon { 
				background: #F0FFF0;
			}

			.site-doc-icon li {
				width: 240px; 
				height: 60px; 
				display: inline-block; 
				border: 1px solid #e2e2e2; 
				line-height: 60px;
				font-size: 16px;
				text-align: center; 
			}

			.font-size0 li { 
				margin-right: -1px; 
				margin-bottom: -1px;
			}

			img { 
				width: 426px; 
				height: 172px; 
			}
		</style>
	</head>

	<body>
		<ul class="site-doc-icon" style="width: 983px;">
	      	<li>元素li和li之间是有一段空白的。</li>
	      	<li>空白符会造成元素显示有间隙。</li>
	      	<li>消除间隙就不能有空白符。</li>
	      	<li>不留空白代码格式又显得糟糕。</li>
	      	<li>我们有消除间隙小窍门。</li>
	      	<li>在元素的父容器中设置:</li>
	      	<li>font-size: 0;</li>
	      	<li>也可以消除间隙的哦。</li>
    	</ul>
		<div>
			<img src="bg1.png" alt="bg1" />
	    	<img src="bg2.png" alt="bg2" />
	    	<img src="bg3.png" alt="bg3" />
    	</div>

		<ul class="site-doc-icon font-size0" style="font-size: 0; width: 965px; margin-top: 30px;">
	      	<li>元素li和li之间是有一段空白的。</li>
	      	<li>空白符会造成元素显示有间隙。</li>
	      	<li>消除间隙就不能有空白符。</li>
	      	<li>不留空白代码格式又显得糟糕。</li>
	      	<li>我们有消除间隙小窍门。</li>
	      	<li>在元素的父容器中设置:</li>
	      	<li>font-size: 0;</li>
	      	<li>也可以消除间隙的哦。</li>
    	</ul>
    	<div style="font-size: 0;">
			<img src="bg1.png" alt="bg1" />
	    	<img src="bg2.png" alt="bg2" />
	    	<img src="bg3.png" alt="bg3" />
    	</div>
	</body>
</html>

3.2. 效果图