css布局中margin为0,但依然有间距问题的解决方法

    在进行布局时经常会出现,div与div之间虽然设置为了margin: 0px ,但是依然有间距的问题,比如以下这种情况:

html部分代码如下:

<body>
	<div class="main">
		<div class="content">
			<div class="Sbox">
				<div class="boximg"><img src="img/1.jpg"></div>
				<div class="boxtext"><p>Batman</p></div>
			</div>
			<div class="Sbox">
				<div class="boximg"><img src="img/2.jpg"></div>
				<div class="boxtext"><p>Eminem</p></div>
			</div>
			<div class="Sbox">
				<div class="boximg"><img src="img/3.jpg"></div>
				<div class="boxtext"><p>Skrillex</p></div>
			</div>
			<div class="Sbox">
				<div class="boximg"><img src="img/4.jpg"></div>
				<div class="boxtext"><p>Hearthstone</p></div>
			</div>
			<div class="Sbox">
				<div class="boximg"><img src="img/5.jpg"></div>
				<div class="boxtext"><p>HigherBrother</p></div>
			</div>
		</div>
	</div>
</body>

css部分代码:

.content {
	background-color: lightblue;
	width: 900px;
	padding: 20px;
	text-align: center;
}
.Sbox {
	background-color: white;
	display: inline-block;
	width: 200px;
	height: 140px;
	padding: 10px 0px;
	font-size: 14px;
	margin: 0px;
}

可以看到我虽然设置了各个盒子之间的间距为0px,但是在浏览器中显示出来依然有间距,打开控制台审查元素也显示没有东西占据了宽度啊,这是什么问题呢?难道是浏览器问题?然而其实浏览器并没有问题,有问题的只是我们的代码!!!

    在html中,我们每个div之间有缩进,这里的缩进,其实就是空格或者回车,是一个字符!!!浏览器会认为你在每个div直接加了一个空格,所以即使你的margin为0,但是它中间依旧有间隔,所以就会出现上图的情况。

    那应该怎么办呢?难道是去掉缩进?我们不可以不要缩进啊,那样代码可读性就太差了,那应该怎么解决这个问题呢?其实很简单,我们在 .content 中加上这样一个样式

.content {
	background-color: lightblue;
	width: 900px;
	padding: 20px;
	text-align: center;
        font-size: 0px;
}

    打开浏览器,我们就可以发现

它就已经合并在一起了,因为我们把字体大小设置为了0px,也就不再占据宽度了。


    要是我们设置为

.content {
	background-color: lightblue;
	width: 900px;
	padding: 20px;
	text-align: center;
        font-size: 200px;
}

它就变为了这样,在某些特殊情况下,我们可以利用这一点来进行布局。

  • 14
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值