<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再加上,这样样式也好控制些
一周热门 更多>