คุณสมบัติระยะขอบ CSS เป็นชวเลขสำหรับระยะขอบบน ระยะขอบขวา ระยะขอบล่าง และระยะขอบซ้าย ทำให้เราสามารถระบุพื้นที่รอบ ๆ องค์ประกอบได้ นอกจากนี้เรายังสามารถกำหนดระยะขอบสำหรับแต่ละด้านได้
ไวยากรณ์
ไวยากรณ์ของคุณสมบัติขอบ CSS มีดังต่อไปนี้ -
Selector { margin: /*value*/ }
ตัวอย่าง
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงคุณสมบัติระยะขอบ CSS -
<!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>
โครงร่าง
สิ่งนี้ให้ผลลัพธ์ต่อไปนี้ -