ขอบ CSS

สารบัญ

    แสดงสารบัญ

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

This element has a margin of 70px.

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

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

<h2>CSS Margins</h2>

<div>This element has a margin of 70px.</div>

</body>
</html>

ขอบ CSS

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

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

ระยะขอบ - แต่ละด้าน

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

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

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

  • อัตโนมัติ - เบราว์เซอร์คำนวณระยะขอบ

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

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

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

เคล็ดลับ: อนุญาตให้ใช้ค่าลบได้

ตัวอย่าง

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

p {
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
}

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

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

<h2>Using individual margin properties</h2>

<div>This div element has a top margin of 100px, a right margin of 150px, a bottom margin of 100px, and a left margin of 80px.</div>

</body>
</html>

มาร์จิ้น - คุณสมบัติชวเลข

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

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

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

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

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

margin: 25px 50px 75px 100px;

  • ขอบบนคือ 25px

  • ขอบขวาคือ 50px

  • ขอบล่างคือ 75px

  • ขอบซ้ายคือ 100px

ตัวอย่าง

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

p {
  margin: 25px 50px 75px 100px;
}

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

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

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

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

<hr>

</body>
</html>

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

margin: 25px 50px 75px;

  • ขอบบนคือ 25px

  • ระยะขอบด้านขวาและด้านซ้ายคือ 50px

  • ขอบล่างคือ 75px

ตัวอย่าง

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

p {	margin: 25px 50px 75px;
}

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

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

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

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

<hr>

</body>
</html>

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

margin: 25px 50px;

  • ระยะขอบด้านบนและด้านล่างคือ 25px

  • ระยะขอบด้านขวาและด้านซ้ายคือ 50px

ตัวอย่าง

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

p {	margin: 25px 50px;
}

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

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

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

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

<hr>

</body>
</html>

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

margin: 25px;

  • ระยะขอบทั้งสี่คือ 25px

ตัวอย่าง

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

p {
  margin: 25px;
}

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

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

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

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

<hr>

</body>
</html>

ค่าอัตโนมัติ

คุณสามารถตั้งค่าคุณสมบัติระยะขอบเป็น อัตโนมัติ เพื่อจัดกึ่งกลางองค์ประกอบในแนวนอนภายในคอนเทนเนอร์

องค์ประกอบจะใช้ความกว้างที่ระบุและพื้นที่ที่เหลืออยู่ จะแบ่งระยะขอบซ้ายและขวาเท่าๆ กัน

ตัวอย่าง

ใช้ระยะขอบ: อัตโนมัติ:

div {
  width: 300px;
  margin: 
auto;
  border: 1px solid red;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  margin: auto;
  border: 1px solid red;
}
</style>
</head>
<body>

<h2>Use of margin: auto</h2>
<p>You can set the margin property to auto to horizontally center the element within its container. The element will then take up the specified width, and the remaining space will be split equally between the left and right margins:</p>

<div>
This div will be horizontally centered because it has margin: auto;
</div>

</body>
</html>

สืบทอดคุณค่า

ตัวอย่างนี้ช่วยให้ระยะขอบด้านซ้ายของ

องค์ประกอบที่สืบทอดมาจากองค์ประกอบหลัก (<div>):

ตัวอย่าง

การใช้ค่าสืบทอด:

div {
  border: 1px solid red;
  margin-left: 100px;
}
p.ex1 {
    margin-left: 
inherit;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid red;
  margin-left: 100px;
}

p.ex1 {
  margin-left: inherit;
}
</style>
</head>
<body>

<h2>Use of the inherit value</h2>
<p>Let the left margin be inherited from the parent element:</p>

<div>
<p class="ex1">This paragraph has an inherited left margin (from the div element).</p>
</div>

</body>
</html>

คุณสมบัติ CSS Margin ทั้งหมด

margin

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

margin-bottom

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

margin-left

ตั้งค่าระยะขอบซ้ายขององค์ประกอบ

margin-right

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

margin-top

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