你對CSS padding屬性定義邊內補白的概念是否了解，這裡和大家簡單分享一下，邊內補白分為上邊內補白(top)，下邊內補白(bottom)，左邊內補白(left)，右邊內補白(right)，而且邊內補白只有width一種屬性。
CSS padding屬性定義邊內補白
邊框的裡面可以有一層邊內補白(padding),邊內補白定義了邊框與邊框裡面內容的距離。邊內補白分為上邊內補白(top),下邊內補白(bottom),左邊內補白(left),右邊內補白(right)。
邊內補白只有width一種屬性.
padding--定義邊內補白
取值:<padding-width>{1,4}|inherit
<padding-width>{1,4}:邊內補白寬度
inherit:繼承
初始值:0
繼承性:否
適用於:所有元素,,除了table-row-group,table-header-group,table-footer-group,table-row,table-column-group和table-column
◆padding:邊內補白
padding-width的取值
<length>:長度表示法
<percentage>:百分比表示法,padding百分比的計算是基於生成的框的包含塊的寬度.
auto:自動
提示:padding邊內補白不可以取負值;邊內補白是看不到的,因為它本身是透明的.
示例
◆為padding-width指定一個值
- padding:padding-top/padding-right/padding-bottom/padding-left;
- p#onepaddings
- {
- padding:12px;
- }
所有邊內補白全部為12px
等價於下面的定義
- p#onepaddings
- {
- padding-top-width:12px;
- padding-right-width:12px;
- padding-bottom-width:12px;
- padding-left-width:12px;
- }
◆為padding-width指定兩個值
- padding:padding-top/padding-bottompadding-right/padding-left;
- p#threepaddings
- {
- padding:12px5%;
- }
上下邊內補白是12px,左右邊內補白是5%(相對於整個頁面).
等價於下面的定義
- p#threepaddings
- {
- padding-top-width:12px;
- padding-right-width:5%;
- padding-bottom-width:12px;
- padding-left-width:5%;
- }
- 為padding-width指定三個值
- padding:padding-toppadding-right/padding-leFTPadding-bottom;
- p#threepaddings
- {
- padding:12px5%0;
- }
上邊內補白是12px,左右邊內補白是5%(相對於整個頁面),下邊內補白是0.
等價於下面的定義
- p#twopaddings
- {
- padding-top-width:12px;
- padding-right-width:5%;
- padding-bottom-width:0;
- padding-left-width:5%;
- }
- 為padding-width指定四個值
- padding:padding-toppadding-rightpadding-bottompadding-left;
- p#fourpaddings
- {
- padding:12px5%-12pxauto;
- }
上邊內補白是12px,右邊內補白是5%(相對於整個頁面),下邊內補白是-12px,左邊內補白將根據浏覽器自動調整.
如果padding屬性後面跟隨四個值,那麼值的分配順序是從上面開始以順時針旋轉分配.
等價於下面的定義
- p#fourpaddings
- {
- padding-top-width:12px;
- padding-right-width:5%;
- padding-bottom-width:-12px;
- padding-left-width:auto;
- }