Margin กำหนดระยะห่างระหว่างวัตถุ CSS

Margin กำหนดระยะห่างระหว่างวัตถุ

CSS

margin เป็นการกำหนดระยะห่างระหว่างวัตถุเช่น กำหนดให้ข้อความห่างจาก ตาราง 1 cm , กำหนดระยะห่างระหว่างข้อความด้วยกัน , ระหว่างรูปกับตัวอักษร

ลองพิมพ์ดูง่ายนิดเดียว คลิกที่หัวข้อเพื่อทดลองพิมพ์

    1.ตัวอย่างการใช้งาน margin
    ในตัวอย่างเป็นการกำหนดระยะห่างระหว่าง p tag และขอบด้านข้างของ browser เราใช้คำสั่ง p.margin {margin: 2cm 4cm 3cm 4cm} ในบทที่แล้วคงจำได้ว่าเราเรียงลำดับระยะห่างดังนี้ p.margin {margin: บน ขวา ล่าง ซ้าย} ซึ่งหน่วยที่ใช้ในการบอกระยะสามารถใช้หน่วย cm , px หรือ สามารถบอกเป็น % ก็ได้

    2.กำหนดระยะห่างด้านบน
    ในตัวอย่างเป็นการกำหนดระยะห่างด้านบนของวัตถุ

    3.กำหนดระยะห่างด้านขวา
    ในตัวอย่างเป็นการกำหนดระยะห่างด้านขวาของวัตถุ จะเห็นได้ว่าเมื่อตัวอักษรแสดงผลถึงระยะห่างทางขวา 30% แล้วจะขึ้นบรรทัดใหม่ทันที

    4.กำหนดระยะห่างด้านล่าง
    ในตัวอย่างเป็นการกำหนดระยะห่างด้านล่างของวัตถุ ไม่รวมระยะระหว่างขอบของวัตถุกับขอบของ browser 

    5.กำหนดระยะห่างด้านซ้าย
    ในตัวอย่างเป็นการกำหนดระยะห่างด้านซ้ายของวัตถุ