站長資訊網(wǎng)css設(shè)置上下間距的方法：1、使用“l(fā)ine-height:間距值;”樣式來設(shè)置上下間距；2、使用margin-top和margin-bottom屬性來設(shè)置上下間距；3、使用padding-top和padding-bottom屬性來設(shè)置。
本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
1、使用line-height屬性設(shè)置上下間距
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type="text/css"> div{ width: 200px; border: 1px solid red; } .abc { line-height: 50px; } </style> </head> <body> <div > <p>第一段</p> <p>第二段</p> <p>第三段</p> <p>第四段</p> </div><br> <div class="abc"> <p>第一段</p> <p>第二段</p> <p>第三段</p> <p>第四段</p> </div> </body> </html>
效果圖：
2、使用margin-top和margin-bottom屬性來設(shè)置上下間距
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type="text/css"> div{ width: 200px; border: 1px solid red; } .abc p { margin-top:50px; margin-bottom:50px; } </style> </head> <body> <div > <p>第一段</p> <p>第二段</p> <p>第三段</p> <p>第四段</p> </div><br> <div class="abc"> <p>第一段</p> <p>第二段</p> <p>第三段</p> <p>第四段</p> </div> </body> </html>
效果圖：
【推薦教程：CSS視頻教程 、html視頻教程】
3、使用padding-top和padding-bottom屬性來設(shè)置上下間距
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type="text/css"> div{ width: 200px; border: 1px solid red; } .abc p { padding-top:30px; padding-bottom:30px; } </style> </head> <body> <div > <p>第一段</p> <p>第二段</p> <p>第三段</p> <p>第四段</p> </div><br> <div class="abc"> <p>第一段</p> <p>第二段</p> <p>第三段</p> <p>第四段</p> </div> </body> </html>
效果圖：
