คุณสมบัติ CSS margin property ใช้ตั้งค่าพื้นที่ margin รอบองค์ประกอบที่เลือก รอบขอบของมัน คุณสมบัติ margin เป็น shorthand สำหรับ margin-top, margin-right, margin-bottom, และ margin-left
ไวยากรณ์
ไวยากรณ์ของคุณสมบัติ CSS margin property มีดังนี้:
Selector { margin: /*value*/ }
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงคุณสมบัติ CSS margin property:
ตัวอย่าง
<!DOCTYPE html> <html> <head> <style> body * { display: flex; float: left; margin: 10px 15px; border: thin solid; text-align: center; width: 40%; border-radius: 5%; box-shadow: 0 0 4px 1px grey; } p { font-family: "Sim Sun", monospace; background-color: lightcyan; } div { font-family: Impact, cursive; background-color: lightgreen; } </style> </head> <body> <p>First demo text</p> <div>A demo line goes like this..</div> </body> </html>
ผลลัพธ์
ได้ผลลัพธ์ดังนี้:
ตัวอย่าง
<!DOCTYPE html> <html> <head> <style> table, table * { margin: 5% 30%; border: 12px double red; padding: 0.5rem; border-radius: 30px; } td:nth-child(even) { background-color: lightblue; } td:nth-child(odd) { background-color: lightgreen; } </style> </head> <body> <table> <tr> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> </table> </body> </html>
ผลลัพธ์
ได้ผลลัพธ์ดังนี้:
