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;
}

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

css布局中margin为0，但依然有间距问题的解决方法相关推荐

VirtualBox虚拟机中启用usb3.0却无法显示u盘的解决方法
主机系统为win7 64位,由于工作需要,安装了Virtualbox 5.18虚拟机,virtaulbox中安装了win7 32系统.以为下启用usb 3.0的步骤: 1.宿主机要支持 usb 3.0 ...
在CSS布局中让Floats轻拂
If you're new to CSS layouts, you'd be forgiven for thinking that using CSS floats in imaginative wa ...
DIV CSS布局中绝对定位和浮动用法
转自:http://developer.51cto.com/art/201009/223337_1.htm 你对DIV CSS布局中绝对定位和浮动的概念及使用是否熟悉,这里和大家分享一下,CSS中,实 ...
php中的文字排版问题,CSS布局中常用的文字排版相关属性详解
本篇文章给大家带来的内容是关于CSS布局中常用的文字排版相关属性详解,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. CSS布局中常用的文字排版相关属性详解一.设定文字字体.颜色.大 ...
css布局中的居中问题
css布局中的居中问题作者:阿捷 2004-7-5 14:35:49 #sample{ HEIGHT:240px;WIDTH:400px; BACKGROUND: url(http://www.w3 ...
div css布局中CSS图片大小自动按比例等比例缩小图片不变形解决技巧
div css布局中CSS图片大小自动按比例等比例缩小图片不变形解决技巧在DIV CSS布局中对于图片列表或图片排版时,图片不是固定宽度高度大小,但图片占位是固定宽度高度,这个时候如果使用CSS固定 ...
div css布局中CSS图片大小自动按比例等比例缩小图片不变形解决技巧（转）
本人对前端处理不是很牛,所以转载这文章.原文地址:http://www.divcss5.com/wenji/w632.shtml DIV CSS布局中对于图片列表或图片排版时,图片不是固定宽度高度大小 ...
android线程改变布局,Android线程中设置控件的值提示报错的解决方法
本文实例讲述了Android线程中设置控件的值提示报错的解决方法.分享给大家供大家参考,具体如下: 在Android线程中设置控件的值一般会与Handler联合使用,如下: package com.y ...
div css每行文字显示一半同时文字字体重叠显示不全解决方法
CSS DIV布局中出现单行或多行文字的每行文字内容不能显示全,上下行文字有一点点重叠现象,文字字体只显示一半解决方法,在低版本IE特别明显文字字体显示不全,在谷歌浏览器等高版本IE浏览器测试还好些. ...

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

css布局中margin为0，但依然有间距问题的解决方法相关推荐

最新文章

热门文章