关于标签之间因为换行等问题造成的空白间距问题处理

在编写HTML文件时，我们就会遇到，类似这样的问题

	CSS文件：
　　　　<style>
		ul{
			list-style: none;
		}
		li{
			width: 100px;
			height: 50px;
			line-height: 50px;
			background: hotpink;
			display: inline-block;
			text-align: center;
		}
	</style>

　　

      HTML结构：
　　　  <ul>
		<li>菜单</li>
		<li>菜单</li>
		<li>菜单</li>
		<li>菜单</li>
		<li>菜单</li>
		<li>菜单</li>
	</ul>

　　

我们发现，li标签之间会存在空白格，这是由于，标签换行造成的，那么怎么去掉这些空白格呢？

有两个解决方案：

方案一：去掉li标签之间的换行

处理后的效果

 

 

方案二：给父级标签设置font-size:0px;给当前标签设置font-size：14px;

处理后的效果

<style>
		ul{
			list-style: none;
			font-size: 0px;
		}
		li{
			width: 100px;
			height: 50px;
			line-height: 50px;
			background: hotpink;
			display: inline-block;
			text-align: center;
			font-size: 14px;
		}
	</style>
</head>
<body>
	<ul>
		<li>菜单</li>
		<li>菜单</li>
		<li>菜单</li>
		<li>菜单</li>
		<li>菜单</li>
		<li>菜单</li>
	</ul>
</body>

　　

 

posted @ 2017-02-26 09:12  豆浆油条123  阅读(970)  评论(0)  编辑  收藏  举报