Margins and Padding การจัดการพื้นที่ระหว่างสิ่งต่างๆ
เขียนเมื่อ 15 ปีก่อน โดย Ninenik Narkdeemargin padding css
คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ margin padding css
margin และ padding เป็น property ที่ใช้สำหรับกำหนดช่องว่างระหว่าง element โดยที่
margin จะเป็นการกำหนดข่องว่างภายนอก element ส่วน padding เป็นการกำหนดช่องว่าง
ภายใน element
เปลี่ยน CSS โค้ดสำหรับห้วข้อรองหรือ h2 ดังนี้
้ำh2{ font-size:10px; background-color:red; margin:10px; padding:15px; }
จากโค้ดด้านบนจะเป็นการกำหนดช่องว่างภายนอก element h2 เท่ากับ 10 pixels ด้วย margin
และกำหนดช่องว่างภายในด้วย padding เท่ากับ 15 pixels
นอกจากนั้นแต่ละด้านของ element ก็สามารถกำหนดค่าเฉพาะได้ ได้แ่ก่ margin-top, margin-right
, margin-bottom, margin-left, padding-top, padding-right, padding-bottom และ padding-left
The Box Model
margin , padding และ border เป็นส่วนประกอบหนึ่งของส่ิงที่เรียกว่า Box โมเดล ซึ่งมีลักษณะดังนี้คือ
ภายใน Box โมเดล จะีมีเนื้อหาหรือ content ภายใจ และถูกล้อมรอบด้วย padding , border และ margin
ตามลำดับ ดูภาพด้านล่างประกอบ
เพจได้ทุก element
เนื้อหาที่เี่กี่ยวข้อง
- การใช้งาน CSS - ศึกษาิวิธีการนำ CSS ไปใช้กับ HTML
- สิ่งที่เรียกว่า Selects, Properties , and Values - สิ่งที่เป็นองค์ประกอบของ CSS
- สี Colours - การใช้งานสี
- ข้อความ Text - การจัดการเกี่ยวกับขนาดและรูปร่างของข้อความ
- Margins and Padding - การจัดการพื้นที่ระหว่างสิ่งต่างๆ
- Borders - การจัดการเกี่ยวกับขอบ
- รวมส่วนประกอบต่างข้างบนเป็น CSS