คุณสมบัติ margin แบบย่อใน CSS ใช้สำหรับกำหนดพื้นที่ margin สำหรับองค์ประกอบ มันตั้งค่าในทิศทางเข็มนาฬิกา คือ margin-top, margin-right, margin-bottom และ margin-left
ไวยากรณ์
ไวยากรณ์ของคุณสมบัติ CSS margin ดังนี้:
Selector { margin: /*value*/ }
ตัวอย่างต่อไปนี้แสดงคุณสมบัติ CSS margin แบบย่อ:
ตัวอย่าง
<!DOCTYPE html> <html> <head> <style> div { margin: 7% auto -3% 25%; width: 40px; height: 40px; padding: 0.9rem; box-shadow: inset 0 0 50px turquoise; border: thin solid; } div > div { border-top-right-radius: 100px; border-bottom-right-radius: 500px; border-top-left-radius: 30px; box-shadow: inset 0 0 6px navy; } div > div > div { padding: 0.3em; margin: 2px -40px; box-shadow: inset 0 0 16px orange; border-radius: 50%; } #one { padding: 50px; border-radius: 10px; } </style> </head> <body> <div id="one"> <div> <div></div> </div> </div> </body> </html>
ผลลัพธ์
ตัวอย่างเพิ่มเติม
<!DOCTYPE html> <html> <head> <style> article { margin: 2em 1em; background-color: bisque; } span { margin: -23% 83%; border-left: dashed; background-image: linear-gradient(to right, lightgreen, forestgreen); font-size: 1.4em; font-style: italic; } </style> </head> <body> <h2>Spring Framework คืออะไร?</h2> <article> Spring framework เป็นแพลตฟอร์ม Java โอเพนซอร์ส เริ่มเขียนโดย Rod Johnson และเปิดตัวครั้งแรกภายใต้ Apache 2.0 license ในมิถุนายน 2003<span> Spring เบาเมื่อพูดถึงขนาดและความโปร่งใส เวอร์ชันพื้นฐานของ Spring framework ประมาณ 2MB</span> </article> </body> </html>
ผลลัพธ์
