注意是段落间的距离,不是行距,不要跟我说是line-height
CSSä¸å¦ä½æ§å¶æ®µè½é´çè·ç¦»æ¹æ³ï¼
1ãline-height为20pxæ¡ä¾ï¼DIV+CSS代ç ï¼
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>段è½æ¡ä¾</title>
<style>
p{ line-height:20px}
/* css 注éï¼ è®¾ç½®è¡é«ä¸º20px */
</style>
</head>
<body>
<p>第ä¸æ®µï¼ç¬¬ä¸è¡<br />
第äºè¡</p>
<p>第äºæ®µ</p>
<p>第ä¸æ®µ</p>
</body>
</html>
è¡é«line-heightå®ç°æ®µè½é´è·
åå«è®¾ç½®20pxå50pxè¡é«æ ·å¼æ¡ä¾ï¼å¯¹æ¯åç°ä¸åè¡é«å¼ï¼æ®µè½ä¸ä¸é´è·ä¹äº§çä¸åè·ç¦»ï¼æ以使ç¨line-heightå¯ä»¥è®¾ç½®æ®µè½é´è·è·ç¦»ï¼ä½è¿éä¸æ¨è使ç¨line-height设置段è½ä¹é´é´è·ã
äºãcss paddingå è¡¥ç½ï¼å è¾¹è·ï¼
å¯ä»¥æ¨è使ç¨padding设置段è½ä¸ä¸é´è·ãéè¿è®¾ç½®ä¸ä¸å è¡¥ç½ï¼å è·ç¦»å³å¯å®ç°p段è½ä¸ä¸é´è·è®¾ç½®ã
å ³é®åï¼p{padding:10px 0}
æ¥ä¸æ¥DIVCSS5以æ¡ä¾æ¼ç¤ºCSS段è½ä¸ä¸è·ç¦»è®¾ç½®ã
1ã设置ä¸ä¸å
è¡¥ç½ä¸º10px(padding:10px 0)
å®æ´css+div代ç ï¼
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>段è½æ¡ä¾</title>
<style>
p{ padding:10px 0}
/* css注éï¼ è®¾ç½®padding为ä¸ä¸10px */
</style>
</head>
<body>
<p>第ä¸æ®µï¼ç¬¬ä¸è¡<br />
第äºè¡</p>
<p>第äºæ®µ</p>
<p>第ä¸æ®µ</p>
</body>
</html>
padding段è½é´è·
2ã设置ä¸ä¸å
è¡¥ç½ä¸º30px(padding:30px 0)
div css代ç å¦ä¸ï¼
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>段è½æ¡ä¾</title>
<style>
p{ padding:30px 0}
/* css注éï¼ è®¾ç½®padding为ä¸ä¸30px */
</style>
</head>
<body>
<p>第ä¸æ®µï¼ç¬¬ä¸è¡<br />
第äºè¡</p>
<p>第äºæ®µ</p>
<p>第ä¸æ®µ</p>
</body>
</html>
ä¸ä¸paddingé´è·ä¸º30pxææ
éè¿å¯¹pæ ç¾è®¾ç½®paddingä¸ä¸è¡¥ç½å³å¯å®ç°æ®µè½ä¹é´é´è·ï¼åæ¶æ¨è使ç¨paddingæ ·å¼å®ç°æ®µè½é´è·è·ç¦»è®¾ç½®ã
ä¸ãcss marginå¤è¾¹è·
CSS段è½é´è·è°æ´ä¹marginå®ç°ä¸ä¸æ®µè½ä¹é´é´è·è·ç¦»æ ·å¼è®¾ç½®ï¼æ们ç¥émarginæ¯è®¾ç½®ä¸ä¸å·¦å³å¯¹è±¡ä¸å¯¹è±¡ä¹é´è·ç¦»è®¾ç½®ï¼è¿é段è½ä¹å¯ä»¥ä½¿ç¨æ¤cssæ ·å¼å®ç°é´è·ãè¿éDIVCSS5ä¾ç¶ä»¥è®¾ç½®ä¸¤ç»marginæ ·å¼è¿è¡å¯¹æ¯è§å¯ã
å ³é®æ ·å¼åè¯ï¼p{margin:10px 0}
1ãcss设置marginä¸ä¸é´è·ä¸º10px,html+css代ç ï¼
<!DOCTYPE html><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>段è½æ¡ä¾</title>
<style>
p{margin:10px 0}
/* css注éï¼ è®¾ç½®margin为对象ä¸ä¸é´è·10px */
</style>
</head>
<body>
<p>第ä¸æ®µï¼ç¬¬ä¸è¡<br />
第äºè¡</p>
<p>第äºæ®µ</p>
<p>第ä¸æ®µ</p>
</body>
</html>
设置margin段è½ä¸ä¸é´è·ä¸º10px
2ãcss设置marginä¸ä¸é´è·ä¸º30pxï¼å®æ´ä»£ç å¦ä¸ï¼
<!DOCTYPE html><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>段è½æ¡ä¾</title>
<style>
p{margin:30px 0}
/* css注éï¼ è®¾ç½®margin为对象ä¸ä¸é´è·30px */
</style>
</head>
<body>
<p>第ä¸æ®µï¼ç¬¬ä¸è¡<br />
第äºè¡</p>
<p>第äºæ®µ</p>
<p>第ä¸æ®µ</p>
</body>
</html>
设置pæ ç¾ä¸ä¸marginé´è·ä¸º30px
è§å¯marginä¸ä¸é´è·è®¾ç½®ä¸º10pxå30pxå®ç°äºé´è·è°æ´ç®çï¼è¿éä¹æ¨è使ç¨margin对段è½ä¸ä¸é´è·è®¾ç½®ã
margin-top:10px;