您好,登錄后才能下訂單哦!
今天小編給大家分享的是css設置內邊距的方法,相信很多人都不太了解,為了讓大家更加了解,所以給大家總結了以下內容,一起往下看吧。一定會有所收獲的哦。
在css中,可以使用padding屬性設置內邊距,只需要給元素設置“padding:數值+單位|百分比數值”即可。padding屬性設置元素所有內邊距的寬度,或者設置各邊上內邊距的寬度。padding屬性不允許指定負邊距值。
我們來看一下設置padding(內邊距)的方法:
我們的內間距是屬于css盒模型之中的一種,那么現在我們來看看內間距都是怎么設置的吧。
padding: 是一個簡寫屬性,可以設置一個聲明中的所有內邊距屬性。
單獨使用 padding 屬性可以改變上下左右的填充。
可能的值:
length:定義一個固定的填充(像素, pt, em,等)
%:使用百分比值定義一個填充
用法:
padding-left 設置對象距離左邊的邊距補白間隔
div{padding-left:5px}
對象內距離左邊補白間距為5px
padding-right 設置對象距離右邊的邊距補白間隔
div{padding-right:5px}
對象內距離右邊補白間距為5px
padding-top 設置對象距離上邊的邊距補白間隔
div{padding-top:5px}
對象內距離上邊補白間距為5px
padding-bottom 設置對象距離下邊的邊距補白間隔
div{padding-bottom:5px}
對象內距離下邊補白間距為5px
說明
檢索或設置對象四邊的補丁邊距。
如果提供全部四個參數值,將按上-右-下-左的順序作用于四邊。
如果只提供一個,將用于全部的四條邊。
如果提供兩個,第一個用于上-下,第二個用于左-右。
如果提供三個,第一個用于上,第二個用于左-右,第三個用于下。
內聯對象要使用該屬性,必須先設定對象的height或width屬性,或者設定position屬性為absolute。
Padding的值不能為負值。
實例:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> .css{ width:350px; height:80px; border:1px solid #00F; padding-left:40px; padding-right:40px; padding-top:40px; padding-bottom:40px; /* 可以合起來寫成padding:40px; */ } </style> </head> <body> <div class="css">padding用法</div> </body> </html>
效果圖:
css是一種用來表現HTML或XML等文件樣式的計算機語言,主要是用來設計網頁的樣式,使網頁更加美化。它也是一種定義樣式結構如字體、顏色、位置等的語言,并且css樣式可以直接存儲于HTML網頁或者單獨的樣式單文件中,而樣式規則的優先級由css根據這個層次結構決定,從而實現級聯效果,發展至今,css不僅能裝飾網頁,也可以配合各種腳本對于網頁進行格式化。
關于css設置內邊距的方法就分享到這里了,希望以上內容可以對大家有一定的參考價值,可以學以致用。如果喜歡本篇文章,不妨把它分享出去讓更多的人看到。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。