มุมใน CSS

paddingของตัวปล่อยนี้คือ 70px

มุมใน CSS

CSS padding attribute ใช้สร้างช่องว่างรอบของเนื้อหาองค์ประกอบในช่องที่กำหนดไว้

ผ่าน CSS คุณสามารถควบคุมpadding (padding) ได้ทั้งหมด มีของค่าที่สามารถกำหนดpaddingของแต่ละขอบขององค์ประกอบ (บน, ขวา, ล่าง และซ้าย) ได้

Padding - ขอบเดี่ยว

CSSมี属性ที่ใช้กำหนดpaddingของแต่ละขอบขององค์ประกอบ

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

หนึ่งหลายของชนิดpaddingมีค่าที่สามารถกำหนดได้ตามนี้

  • length - กำหนดpaddingด้วยหน่วยเมตรเช่น px, pt, cm และอื่น ๆ
  • % - กำหนดpaddingด้วยร้อยละของความกว้างของตัวปล่อยที่มี
  • inherit - กำหนดให้มีการสืบทอดpaddingจากตัวปล่อย

คำเตือน：ไม่ยอมรับค่าลบ

實例

เพื่อตั้งค่าpaddingของทั้งสี่ขอบของ <div> ต่างกัน

div {
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}

親自試試

Padding - ชื่อ属性ย่อ

เพื่อลดลงรหัส คุณสามารถกำหนดหนึ่งชนิดตัวแปรสำหรับทุกความเข้าไปด้านในเรียงลำดับของตัวอักษรจำนวนทั้งหมด

padding 屬性是以下各內邊距屬性的簡寫屬性：

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

工作原理是這樣的：

如果 padding 屬性有我們值：

  • padding: 25px 50px 75px 100px;
    • 上內邊距是 25px
    • 右內邊距是 50px
    • 下內邊距是 75px
    • 左內邊距是 100px

實例

使用設定了我們值的 padding 簡寫屬性：

div {
  padding: 25px 50px 75px 100px;
}

親自試試

如果 padding 屬性設定了我們值：

  • padding: 25px 50px 75px;
    • 上內邊距是 25px
    • 右和左內邊距是 50px
    • 下內邊距是 75px

實例

使用設定了我們值的 padding 簡寫屬性：

div {
  padding: 25px 50px 75px;
}

親自試試

如果 padding 屬性設定了两個值：

  • padding: 25px 50px;
    • 上和下內邊距是 25px
    • 右和左內邊距是 50px

實例

使用設定了两個值的 padding 簡寫屬性：

div {
  padding: 25px 50px;
}

親自試試

如果 padding 屬性設定了一個值：

  • padding: 25px;
    • 所有四個內邊距都是 25px

實例

使用設定了一個值的 padding 簡寫屬性：

div {
  padding: 25px;
}

親自試試

內邊距和元素寬度

CSS width 屬性指定元素內容區域的寬度。內容區域是元素（盒模型）的內邊距、邊框和外邊距內的部分。

因此，如果元素擁有指定的寬度，則添加到該元素的內邊距會添加到元素的总寬度中。這通常是不希望的結果。

實例

在這裡，<div> 元素的寬度為 300px。但是，<div> 元素的实际寬度將是 350px（300px + 左內邊距 25px + 右內邊距 25px）：

div {
  width: 300px;
  padding: 25px;
}

親自試試

若要將寬度保持為 300px，無論填充量如何，那麼您可以使用 box-sizing 屬性。這將導致元素保持其寬度。如果增加內邊距，則可用的內容空間會減少。

實例

使用 box-sizing 屬性將寬度保持為 300px，無論填充量如何：

div {
  width: 300px;
  padding: 25px;
  box-sizing: border-box;
}

親自試試

更多實例

設定左內邊距
本例演示如何設定 <p> 元素的左內邊距。
設定右內邊距
本例演示如何設定 <p> 元素的右內邊距。
設定上內邊距
本例演示如何設定 <p> 元素的上內邊距。
設定下內邊距
本例演示如何設定 <p> 元素的下內邊距。

所有 CSS 內邊距屬性

屬性 描述
padding 用於在一條聲明中設定所有內邊距屬性的簡寫屬性。
padding-bottom 設定元素的下內邊距。
padding-left 設定元素的左內邊距。
padding-right ตั้งค่าปริมาณภายในขวาขององค์ประกอบ
padding-top ตั้งค่าปริมาณภายในสูงสุดขององค์ประกอบ

การอ่านเพิ่มเติม

หนังสือเรียนนอก:โมเดลตู้: CSS ขอบเขตภายใน