html布局中怎么会出现一条空隙

<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">#menu {background-color:#ffff99;height:200px; float:left;width:100px;margin-top:0px;}h2 {margin-bottom:0px; font-size:14px;}#container{width:500px;}h1{margin-bottom:0px;text-decoration:0px;font-family:Georgia, "Times New Roman", Times, serif;font-size:40px;color:#90DA11;}#content{float:right;background-color:#6FF;width:400px;height:200px;}#footer{background-color:#6F3;clear:both;text-align:center;}p{line-height:0px;margin-top:5px;text-indent:20px;color:#000;font-family:Arial, Helvetica, sans-serif;font-weight:bolder;}#header{margin-bottom:0px;}</style></head><body><div id = "container"><div id="header"><h1>智慧教室</h1><p>Smart Classroom</p></div><div id="menu"><h2>Menu</h2><ul><li>HTML</li><li>CSS</li><li>JavaScript</li></ul></div><div id="content" ></div><div id="footer">Copyright W3School.com.cn</div></div></body></html>

查看完整描述

2 回答

SMILET

TA贡献1796条经验获得超4个赞

line-height:20px;

margin:0;

text-indent:20px;

color:#000;

font-family:Arial, Helvetica, sans-serif;

font-weight:bolder;

}

<p>标签是带有默认样式的，这一点你必须要知道。

首先，你在<h1>标签下方使用了该标签，而后，你让P标签的line-height为零，这是不合理的，要知道，line-height表示你的这个标签中文字垂直占位，这个数字要合理，比如你这里，你可以使用20px;

而p标签还带有margin-top和margin-bottom的默认样式，你已经让p标签的margin-top为5px了，那么这个空隙，就是margin-bottom带来的。

所以，要让你的p标签没有那个所谓的空隙，就要加上margin-bottom:0;或者是在定义margin-top之前，定义margin:0;都可以。

P标签样式修改后为上面代码框中的样式。

反对回复 2019-03-27

一只斗牛犬

TA贡献1784条经验获得超2个赞

HTML中有缝隙出现的原因有很多：

表格：有表格空间，因此在不需要它们之间有缝隙的时候最好加上一句{border-spacing: 0;}；
浏览器自带的外边距、内边距。因为不同的浏览器，这个属性默认的可能不同，因此，在编写样式之前，加上*{padding：0；margin:0;},清楚浏览器之间的差异；
布局错误，比如：

用了浮动却没有清除浮动，父级因此脱离文档流，布局错乱也有可能出现空隙；
多余的标签，不需要这个标签却又在布局中添加了，并且这个标签有了一些样式，比如内边距，或者border之类的撑起空间的。那么也会出现空隙

反对回复 2019-03-27

热搜

最近搜索清空

html布局中怎么会出现一条空隙

html布局中怎么会出现一条空隙

2 回答

添加回答