首頁猿問 html布局中怎么會出現(xiàn)一條空隙

html布局中怎么會出現(xiàn)一條空隙

Html5

明月笑刀無情 2019-05-25 15:15:02

<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>無標(biāo)題文檔</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 回答

MMTTMM

TA貢獻(xiàn)1869條經(jīng)驗獲得超4個贊

1

2

3

4

5

6

7

8

p{

line-height:20px;

margin:0;

text-indent:20px;

color:#000;

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

font-weight:bolder;

}

<p>標(biāo)簽是帶有默認(rèn)樣式的，這一點你必須要知道。

首先，你在<h1>標(biāo)簽下方使用了該標(biāo)簽，而后，你讓P標(biāo)簽的line-height為零，這是不合理的，要知道，line-height表示你的這個標(biāo)簽中文字垂直占位，這個數(shù)字要合理，比如你這里，你可以使用20px;

而p標(biāo)簽還帶有margin-top和margin-bottom的默認(rèn)樣式，你已經(jīng)讓p標(biāo)簽的margin-top為5px了，那么這個空隙，就是margin-bottom帶來的。

所以，要讓你的p標(biāo)簽沒有那個所謂的空隙，就要加上margin-bottom:0;或者是在定義margin-top之前，定義margin:0;都可以。

P標(biāo)簽樣式修改后為上面代碼框中的樣式。

反對回復(fù) 2019-05-26

回首憶惘然

TA貢獻(xiàn)1847條經(jīng)驗獲得超11個贊

HTML中有縫隙出現(xiàn)的原因有很多：

表格：有表格空間，因此在不需要它們之間有縫隙的時候最好加上一句{border-spacing: 0;}；
瀏覽器自帶的外邊距、內(nèi)邊距。因為不同的瀏覽器，這個屬性默認(rèn)的可能不同，因此，在編寫樣式之前，加上*{padding：0；margin:0;},清楚瀏覽器之間的差異；
布局錯誤，比如：