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
12345678p{ 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标签样式修改后为上面代码框中的样式。 -
一只斗牛犬
HTML中有缝隙出现的原因有很多：表格：有表格空间，因此在不需要它们之间有缝隙的时候最好加上一句{border-spacing: 0;}；浏览器自带的外边距、内边距。因为不同的浏览器，这个属性默认的可能不同，因此，在编写样式之前，加上*{padding：0；margin:0;},清楚浏览器之间的差异；布局错误，比如：用了浮动却没有清除浮动，父级因此脱离文档流，布局错乱也有可能出现空隙；多余的标签，不需要这个标签却又在布局中添加了，并且这个标签有了一些样式，比如内边距，或者border之类的撑起空间的。那么也会出现空隙
随时随地看视频慕课网APP
相关分类
Html5