การขยาย CSS

สารบัญ

    แสดงสารบัญ

Padding ใช้เพื่อสร้างพื้นที่รอบๆ เนื้อหาขององค์ประกอบ ภายในขอบเขตที่กำหนด

This element has a padding of 70px.

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  padding: 70px;
  border: 1px solid #4CAF50;
}
</style>
</head>
<body>

<h2>CSS Padding</h2>
<div>This element has a padding of 70px.</div>

</body>
</html>

การขยาย CSS

คุณสมบัติ CSS padding ใช้เพื่อสร้างพื้นที่รอบๆ เนื้อหาขององค์ประกอบภายในขอบเขตที่กำหนด

ด้วย CSS คุณสามารถควบคุมช่องว่างภายในได้อย่างเต็มที่ มีคุณสมบัติ สำหรับการตั้งค่าช่องว่างภายในสำหรับแต่ละด้านขององค์ประกอบ (บน ขวา ล่าง และซ้าย)

Padding - แต่ละด้าน

CSS มีคุณสมบัติสำหรับระบุช่องว่างภายในสำหรับแต่ละรายการ ด้านข้างขององค์ประกอบ:

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

คุณสมบัติการเติมทั้งหมดสามารถมีค่าต่อไปนี้:

  • ความยาว - ระบุช่องว่างภายในในหน่วย px, pt, cm ฯลฯ

  • % - ระบุช่องว่างภายในเป็น % ของความกว้างขององค์ประกอบที่มี

  • inherit - ระบุว่าช่องว่างภายในควรสืบทอดมาจากองค์ประกอบหลัก

หมายเหตุ: ไม่อนุญาตให้ใช้ค่าลบ

ตัวอย่าง

ตั้งค่าช่องว่างภายในที่แตกต่างกันสำหรับทั้งสี่ด้านของ <div> องค์ประกอบ:

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  background-color: lightblue;
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}
</style>
</head>
<body>

<h2>Using individual padding properties</h2>

<div>This div element has a top padding of 50px, a right padding of 30px, a bottom padding of 50px, and a left padding of 80px.</div>

</body>
</html>

Padding - คุณสมบัติชวเลข

หากต้องการย่อโค้ดให้สั้นลง คุณสามารถระบุคุณสมบัติการเติมทั้งหมดได้ หนึ่งทรัพย์สิน

คุณสมบัติ padding เป็นคุณสมบัติชวเลขสำหรับบุคคลต่อไปนี้ คุณสมบัติการเสริม:

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

นี่คือวิธีการทำงาน:

หากคุณสมบัติ padding มีสี่ค่า:

padding: 25px 50px 75px 100px;

  • ช่องว่างภายในด้านบนคือ 25px

  • ช่องว่างภายในด้านขวาคือ 50px

  • ช่องว่างภายในด้านล่างคือ 75px

  • ช่องว่างภายในด้านซ้ายคือ 100px

ตัวอย่าง

ใช้คุณสมบัติการจดชวเลขช่องว่างภายในที่มีค่าสี่ค่า:

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  padding: 25px 50px 75px 100px;
  background-color: lightblue;
}
</style>
</head>
<body>

<h2>The padding shorthand property - 4 values</h2>

<div>This div element has a top padding of 25px, a right padding of 50px, a bottom padding of 75px, and a left padding of 100px.</div>

</body>
</html>

หากคุณสมบัติ padding มีค่าสามค่า:

padding: 25px 50px 75px;

  • ช่องว่างภายในด้านบนคือ 25px

  • ช่องว่างด้านขวาและด้านซ้ายคือ 50px

  • ช่องว่างภายในด้านล่างคือ 75px

ตัวอย่าง

ใช้คุณสมบัติการจดชวเลขช่องว่างภายในที่มีค่าสามค่า:

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  padding: 25px 50px 75px;
  background-color: lightblue;
}
</style>
</head>
<body>

<h2>The padding shorthand property - 3 values</h2>

<div>This div element has a top padding of 25px, a right and left padding of 50px, and a bottom padding of 75px.</div>

</body>
</html>

หากคุณสมบัติ padding มีสองค่า:

padding: 25px 50px;

  • ช่องว่างภายในด้านบนและด้านล่างคือ 25px

  • ช่องว่างด้านขวาและด้านซ้ายคือ 50px

ตัวอย่าง

ใช้คุณสมบัติการจดชวเลขเติมด้วยสองค่า:

 div {	  padding: 25px 50px;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  padding: 25px 50px;
  background-color: lightblue;
}
</style>
</head>
<body>

<h2>The padding shorthand property - 2 values</h2>

<div>This div element has a top and bottom padding of 25px, and a right and left padding of 50px.</div>

</body>
</html>

หากคุณสมบัติ padding มีค่าเดียว:

padding: 25px;

  • ช่องว่างภายในทั้งสี่มีขนาด 25px

ตัวอย่าง

ใช้คุณสมบัติการจดชวเลขเติมด้วยค่าเดียว:

 div {	  padding: 25px;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  padding: 25px;
  background-color: lightblue;
}
</style>
</head>
<body>

<h2>The padding shorthand property - 1 value</h2>

<div>This div element has a top, bottom, left, and right padding of 25px.</div>

</body>
</html>

ความกว้างภายในและองค์ประกอบ

CSS width คุณสมบัติระบุความกว้างของพื้นที่เนื้อหาขององค์ประกอบ ที่ พื้นที่เนื้อหาคือส่วนที่อยู่ภายในช่องว่างภายใน เส้นขอบ และระยะขอบขององค์ประกอบ (รุ่นกล่อง).

ดังนั้น หากองค์ประกอบมีความกว้างตามที่ระบุ ช่องว่างภายในที่เพิ่มให้กับองค์ประกอบนั้นจะมีผล จะถูกเพิ่มเข้าไปในความกว้างรวมขององค์ประกอบ ซึ่งมักเป็นผลที่ไม่พึงประสงค์

ตัวอย่าง

ที่นี่ <div> องค์ประกอบจะได้รับความกว้าง 300px อย่างไรก็ตาม ความกว้างที่แท้จริงขององค์ประกอบ <div> จะเป็น 350px (300px + 25px ของช่องว่างภายในด้านซ้าย + 25px ของช่องว่างภายในด้านขวา):

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
  width: 300px;
  background-color: yellow;
}

div.ex2 {
  width: 300px;
  padding: 25px;
  background-color: lightblue;
}
</style>
</head>
<body>

<h2>Padding and element width</h2>

<div class="ex1">This div is 300px wide.</div>
<br>

<div class="ex2">The width of this div is 350px, even though it is defined as 300px in the CSS.</div>

</body>
</html>

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

ตัวอย่าง

ใช้คุณสมบัติ box-sizing เพื่อรักษาความกว้างไว้ที่ 300px ไม่ว่าจะอย่างไรก็ตาม จำนวนช่องว่างภายใน:

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
  width: 300px;
  background-color: yellow;
}

div.ex2 {
  width: 300px;
  padding: 25px;
  box-sizing: border-box;
  background-color: lightblue;
}
</style>
</head>
<body>

<h2>Padding and element width - with box-sizing</h2>

<div class="ex1">This div is 300px wide.</div>
<br>

<div class="ex2">The width of this div remains at 300px, in spite of the 50px of total left and right padding, because of the box-sizing: border-box property.
</div>

</body>
</html>

ตัวอย่างเพิ่มเติม

ตั้งค่าช่องว่างภายในด้านซ้าย

<!DOCTYPE html>
<html>
<head>
<style>
p.padding {
  padding-left: 2cm;
}
p.padding2 {
  padding-left: 50%;
}
</style>
</head>
<body>

<h1>The padding-left Property</h1>

<p>This is a text with no left padding.</p>
<p class="padding">This text has a left padding of 2 cm.</p>
<p class="padding2">This text has a left padding of 50%.</p>

</body>
</html>

ตัวอย่างนี้สาธิตวิธีการตั้งค่าช่องว่างภายในด้านซ้ายของ <p> องค์ประกอบ

ตั้งค่าช่องว่างภายในที่เหมาะสม

<!DOCTYPE html>
<html>
<head>
<style>
p.padding {
  padding-right: 2cm;
}

p.padding2 {
  padding-right: 50%;
}
</style>
</head>
<body>

<h1>The padding-right Property</h1>

<p>This is a text with no right padding. This is a text with no right padding. This is a text with no right padding.</p>
<p class="padding">This text has a right padding of 2 cm. This text has a right padding of 2 cm. This text has a right padding of 2 cm.</p>
<p class="padding2">This text has a right padding of 50%. This text has a right padding of 50%. This text has a right padding of 50%.</p>

</body>
</html>

ตัวอย่างนี้สาธิตวิธีการตั้งค่าช่องว่างภายในที่เหมาะสมของ <p> องค์ประกอบ

ตั้งค่าช่องว่างภายในด้านบน

<!DOCTYPE html>
<html>
<head>
<style>
p.padding {
  padding-top: 2cm;
}

p.padding2 {
  padding-top: 50%;
}
</style>
</head>
<body>

<h1>The padding-top Property</h1>

<p>This is a text with no top padding. This is a text with no top padding. This is a text with no top padding.</p>
<p class="padding">This text has a top padding of 2 cm. This text has a top padding of 2 cm. This text has a top padding of 2 cm.</p>
<p class="padding2">This text has a top padding of 50%. This text has a top padding of 50%. This text has a top padding of 50%.</p>

</body>
</html>

ตัวอย่างนี้สาธิตวิธีการตั้งค่าช่องว่างภายในด้านบนของ <p> องค์ประกอบ

ตั้งค่าช่องว่างภายในด้านล่าง

<!DOCTYPE html>
<html>
<head>
<style>
p.padding {
  padding-bottom:2cm;
}

p.padding2 {
  padding-bottom:50%;
}
</style>
</head>
<body>

<h1>The padding-bottom Property</h1>

<p>This is a text with no bottom padding. This is a text with no bottom padding. This is a text with no bottom padding.</p>
<p class="padding">This text has a bottom padding of 2 cm. This text has a bottom padding of 2 cm. This text has a bottom padding of 2 cm.</p>
<p class="padding2">This text has a bottom padding of 50%. This text has a bottom padding of 50%. This text has a bottom padding of 50%.</p>

</body>
</html>

ตัวอย่างนี้สาธิตวิธีการตั้งค่าช่องว่างภายในด้านล่างของ <p> องค์ประกอบ

คุณสมบัติการขยาย CSS ทั้งหมด

padding

คุณสมบัติชวเลขสำหรับการตั้งค่าคุณสมบัติช่องว่างภายในทั้งหมดในการประกาศเดียว

padding-bottom

ตั้งค่าช่องว่างภายในด้านล่างขององค์ประกอบ

padding-left

ตั้งค่าช่องว่างภายในด้านซ้ายขององค์ประกอบ

padding-right

ตั้งค่าช่องว่างภายในด้านขวาขององค์ประกอบ

padding-top

ตั้งค่าช่องว่างภายในด้านบนขององค์ประกอบ