คุณสมบัติ CSS margin property เป็น shorthand สำหรับ margin-top, margin-right, margin-bottom, และ margin-left มันช่วยให้เราระบุพื้นที่รอบๆ องค์ประกอบได้ เราสามารถตั้งค่า margin สำหรับแต่ละด้านแยกกันได้ด้วย
ไวยากรณ์
ไวยากรณ์ของคุณสมบัติ CSS margin property มีดังนี้:
Selector { margin: /*value*/ }
ตัวอย่าง
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงคุณสมบัติ CSS margin property:
<!DOCTYPE html> <html> <head> <style> div { margin: 10px 50px 20px; padding: 1rem; border: dashed; } p { text-align: center; } #demo { margin-left: -80px; box-shadow: inset 0 0 10px brown; } </style> </head> <body> <div></div> <p>This is demo text.</p> <p id="demo">Another demo text.</p> <p>This is new demo text.</p> </body> </html>
ผลลัพธ์
ได้ผลลัพธ์ดังนี้:
ตัวอย่าง
<!DOCTYPE html> <html> <head> <style> ul { margin: auto; background-image: linear-gradient(to right, khaki, aliceblue, skyblue, rebeccapurple); width: 20em; } li { margin-top: 3px; } li + li { margin-left: -20px; } li:last-child { margin-left: 75px; } </style> </head> <body> <h2>Demo Heading</h2> <ul> <li>This is demo list item.</li> <li>This is another list item with different style.</li> <li>This is our third demo text with another style. </li> </ul> </body> </html>
ผลลัพธ์
ได้ผลลัพธ์ดังนี้:
