css如何設定段落間距?在之前的文章【css如何設定段落間距? margin 屬性設定段落間距(程式碼實例)】中我們介紹了css使用外邊距來設定和調整段落間距,本章我們就給大家介紹css如何使用內邊來設定和調整段落間距。有一定的參考價值,有需要的朋友可以參考一下,希望對你們有幫助。
首先我們來了解如何設定css的內邊距?
css的內邊距的設定其實很簡單,使用css padding屬性就可以實現,下面我們來簡單介紹一下這個屬性:
##padding :一個簡寫屬性,可以同時設定元素的所有內邊距;可以有1 到4 個值,不允許使用負值。
說明:
padding屬性設定元素所有內邊距的寬度,或設定各邊上內邊距的寬度。行內非替換元素上設定的內邊距不會影響行高計算;因此,如果一個元素既有內邊距又有背景,從視覺上看可能會延伸到其他行,有可能還會與其他內容重疊。元素的背景會延伸穿過內邊距。不允許指定負邊距值。 舉個小例子:padding:10px 5px 15px 20px;
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>内边距 调整 段落间距</title> <style> .a1{ padding: 20px 0px; } </style> </head> <body> <p>第一段,没有设置段落间距。我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!</p> <p>第二段,没有设置段落间距。我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!</p> <p class="a1">第三段,设置上下段落间距。我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!</p> <p>第四段,没有设置段落间距。我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!</p> <p>第五段,没有设置段落间距。我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!</p> </body> </html>
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>内边距 调整 段落间距</title> <style> *{margin: 0px;padding: 0px;} .a1{ padding-top: 20px; } .a2{ padding-bottom: 20px; } </style> </head> <body> <p>第一段,没有设置段落间距。我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!</p> <p>第二段,没有设置段落间距。我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!</p> <p class="a1">第三段,设置上段落间距。我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!</p> <p class="a2">第四段,设置下段落间距。我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!</p> <p>第五段,没有设置段落间距。我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!</p> </body> </html>
CSS影片教學!
相關建議:#css如何設定行間距? css文字文字的行間距設定(程式碼實例)
css如何設定文字間距? word-spacing屬性與letter-spacing屬性的簡單比較#
以上是css如何使用內邊距來調整段落間距? (程式碼實例)的詳細內容。更多資訊請關注PHP中文網其他相關文章!