ขอบเขต CSS

margin ขององค์ประกอบนี้คือ 70px

ทดลองด้วยตัวเอง

ขอบเขต CSS

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

ผ่าน CSS คุณสามารถควบคุม margin อย่างเต็มที่ มีอัตราส่วนที่สามารถใช้เพื่อตั้งค่า margin ของแต่ละด้าน (บน, ขวา, ล่าง และซ้าย) ขององค์ประกอบ

Margin - ของด้านเดี่ยว

CSS มีอัตราส่วนสำหรับกำหนด margin ของแต่ละขององค์ประกอบ

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

อัตราส่วนด้านนอกทั้งหมดสามารถตั้งค่าค่าต่อไปนี้

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

คำเตือน:อนุญาตให้มีค่าลบ

ตัวอย่าง

ตั้งค่า margin ต่างๆ สำหรับทั้งสี่ด้านของ <p> อิเลเมนต์

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

ทดลองด้วยตัวเอง

Margin - อัตราส่วนย่อ

เพื่อลดรหัสโค้ด สามารถกำหนดอัตราส่วนด้านนอกทั้งหมดในอัตราส่วนเดียว

margin อัตราส่วนเป็นอัตราส่วนย่อของอัตราส่วนด้านนอกต่างๆ

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

หลักการทำงานของมันคือเช่นนี้:

ถ้า margin อัตราส่วนมีสี่ค่า

  • margin: 25px 50px 75px 100px;
    • ด้านบนเครื่องบรรจุว่างเป็น 25px
    • ด้านขวาเครื่องบรรจุว่างเป็น 50px
    • ด้านล่างเครื่องบรรจุว่างเป็น 75px
    • ด้านซ้ายเครื่องบรรจุว่างเป็น 100px

ตัวอย่าง

อัตราส่วนย่อของ margin ตั้งค่าสี่ค่า

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

ทดลองด้วยตัวเอง

ถ้า margin อัตราส่วนตั้งค่าสามค่า

  • margin: 25px 50px 75px;
    • ด้านบนเครื่องบรรจุว่างเป็น 25px
    • ขวาและด้านซ้ายเครื่องบรรจุว่างเป็น 50px
    • ด้านล่างเครื่องบรรจุว่างเป็น 75px

ตัวอย่าง

ใช้อัตราส่วนย่อของ margin ที่ตั้งค่าสามค่า

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

ทดลองด้วยตัวเอง

ถ้า margin อัตราส่วนตั้งค่าสองค่า

  • margin: 25px 50px;
    • ด้านบนและด้านล่างเครื่องบรรจุว่างเป็น 25px
    • ขวาและด้านซ้ายเครื่องบรรจุว่างเป็น 50px

ตัวอย่าง

ใช้อัตราส่วนย่อของ margin ที่ตั้งค่าสองค่า

p {
  margin: 25px 50px;
}

ทดลองด้วยตัวเอง

ถ้า margin อัตราส่วนตั้งค่าค่า

  • margin: 25px;
    • ทั้งสี่เครื่องบรรจุว่างด้านนอกทั้งหมดเป็น 25px

ตัวอย่าง

ใช้ค่าตั้งค่า margin ฉบับย่อของอัตราส่วน

p {
  margin: 25px;
}

ทดลองด้วยตัวเอง

auto ค่า

คุณสามารถกำหนดค่า margin ให้ autoเพื่อที่องค์ประกอบจะมีตำแหน่งตรงกลางในตัวเครือข่าย

แล้วองค์ประกอบนี้จะรับขนาดที่กำหนด และอาณาบริเวณที่เหลือเป็นอัตโนมัติจะแบ่งเท่าๆกันที่ขอบด้านซ้ายและขอบด้านขวา

ตัวอย่าง

ใช้ margin: auto:

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

ทดลองด้วยตัวเอง

ค่า inherit

ตัวอย่างนี้ทำให้ <p class="ex1"> อิสระด้วย margin ซ้ายของตัวประกอบ (div):

ตัวอย่าง

ใช้ค่า inherit:

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

ทดลองด้วยตัวเอง

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

หนังสือเสริม:โมเดลโค้ง CSS - margin