พื้นฐาน CSS

Margin

ระยะห่างระหว่าง element เรียกว่า 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. กำหนดระยะห่างด้านซ้าย
ในตัวอย่างเป็นการกำหนดระยะห่างด้านซ้ายของวัตถุ

คลิกเพื่อทดลองเขียนด้วยตัวเอง


เลื่อนขึ้นด้านบน