css - 空隙是如何产生的？
本文介绍了css - 空隙是如何产生的？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
<html>
<head>
<style type="text/css">
body {
width:400px;
font-size:30px;
}
#top {
width:400px;
line-height:30px;
background-color:#6CF;
padding-left:5px;
}
#box {
width:400px;
background-color:#FF6;
padding-left:5px;
position:static;
}
#box-1 {
width:350px;
background-color:#C9F;
margin-left:20px;
padding-left:5px;
}
#box-2 {
width:350px;
background-color:#C6F;
margin-left:20px;
padding-left:5px;
}
#box-3 {
width:350px;
background-color:#C3F;
margin-left:20px;
padding-left:5px;
}
#footer {
width:400px;
line-height:30px;
background-color:#6CF;
padding-left:20px;
}
</style>
</head>
<body>
<div id="top">id="top"</div>
<div id="box">id="box"
<div id="box-1">
<p>id="box-1"</p>
</div>
<div id="box-2">
<p>id="box-2"</p>
</div>
<div id="box-3">
<p>id="box-3"</p>
</div>
</div>
<div id="footer">id="footer"</div>
</body>
</html>
下面是显示效果
读了半天css，也想不出，空隙是如何产生的？
解决方案
空隙是p标签的原生样式产生的，可以直接一开始就把p标签的margin和padding设置为0，这样就不会有空隙了，需要margin或者padding再加上，这样样式也好控制些
这篇关于css - 空隙是如何产生的？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
