CSS อนุญาตให้เราควบคุมพื้นที่รอบด้านต่างๆ ขององค์ประกอบ คุณสมบัติ CSS margin เป็นคุณสมบัติแบบย่อสำหรับคุณสมบัติต่อไปนี้: margin-top, margin-right, margin-bottom และ margin-left
ไวยากรณ์
ไวยากรณ์ของคุณสมบัติ CSS margin ดังนี้:
Selector { margin-top: /*value*/ margin-right: /*value*/ margin-bottom: /*value*/ margin-left: /*value*/ }
ตัวอย่างต่อไปนี้แสดงคุณสมบัติ CSS margin:
ตัวอย่าง
<!DOCTYPE html> <html> <head> <style> div { margin-left: auto; margin-bottom: 4em; width: 30%; padding: 0.6rem; box-shadow: inset 0 0 3px turquoise; outline: thin dotted; text-align: center; } div + div { margin-right: 30%; box-shadow: inset 0 0 6px teal; } div + div + div { margin-left: 45%; margin-top: -190px; box-shadow: inset 0 0 6px orange; } </style> </head> <body> <div> This is demo text </div> <div>One (different margins)</div> <div>Two (different margins)</div> </body> </html>
ผลลัพธ์
ตัวอย่างเพิ่มเติม
<!DOCTYPE html> <html> <head> <style> div { margin-top: 7%; margin-left: 25%; margin-bottom: -3em; width: 40px; height: 40px; padding: 0.6rem; box-shadow: inset 0 0 3px turquoise; border-top-right-radius: 100px; } div + div { margin-right: 30%; border-top-right-radius: unset; border-top-left-radius: 100px; box-shadow: inset 0 0 6px teal; } div + div + div { margin-left: 25%; margin-top: -140px; box-shadow: inset 0 0 6px orange; border-bottom-right-radius: 100px; } </style> </head> <body> <div></div> <div></div> <div></div> </body> </html>
ผลลัพธ์
