ระยะห่างระหว่าง Elements ด้วย Margin

เมื่อไรก็ตามที่เราต้องการ Elements หรือวัตถุที่มากกว่า 2 ชิ้นขึ้นไปมาเรียงต่อ หรือนำมาชิดติดกัน margin ถือเป็นคำสั่งหนึ่งที่ใช้เว้นช่องว่าระยะห่างระหว่าง element ถึง element

คือ ถ้าเราเพิ่ม margin ให้กับ elements ใดๆ แล้ว ช่องว่างที่เกิดจากค่าของ margin นั้นจะเป็นพื้นที่ว่างเปล่า มองทะลุปรุโปร่งถึงข้างหลัง ตามขอบทุกๆ ด้านที่เราใส่ค่าเข้าไป และไม่แสดงพื้นหลังของ element และแสดงค่าจากในออกนอก ซึ่งไม่เหมือนกับการใช้ padding เพื่อกันข้อมูลออกจากขอบของ element ซึ่งจะกันเข้าข้างใน หรือจะให้ค่าจากนอกเข้าในนั่นเอง

เมื่อเราต้องกันวัตถุ 2 ชิ้นให้อยู่ห่างกันตามระยะที่เราต้องการ เช่นการใช้ div ถ้าจะให้ div สองอันอยู่ห่างกัน โดยกำหนดค่าให้ .box1 มี margin: 5px;

CSS

XHTML

ตัวอย่างการใช้ margin

Back to Top

4 Responses to ระยะห่างระหว่าง Elements ด้วย Margin

  1. SamuRai

    บอกได้คำเดียวว่า ขอบคุณมากมาย ขอรับ

    Reply

  2. KRISS

    คุณพรน่าจะเขียนเรื่อง margin collapsing ด้วยนะครับ เพราะตอนผมหัดเขียน เจอเข้าไปหลายดอก งงเหมือนกันครับ

    บทความดีทุกอันครับ เยี่ยมเลย

    Reply

  3. 33333

    งงมากคับ

    Reply

  4. Gimmick

    ดีมากเลยครับสวยอ่ะชอบๆแล้วจะเอาไปฝึกน๊ะครับ

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Connect with Facebook

Back to Top