Margins and Padding การจัดการพื้นที่ระหว่างสิ่งต่างๆ

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
ตามลำดับ ดูภาพด้านล่างประกอบ

 

จริงๆ แล้วไม่จำเป็นต้องใจ้ทั้งหมดก็ได้ แต่จำไว้ว่า Box โมเดลสามารถนำไปประยุกต์ใช้กับ element อื่นภายใน
เพจได้ทุก element

 

 

เนื้อหาที่เี่กี่ยวข้อง

• การใช้งาน CSS - ศึกษาิวิธีการนำ CSS ไปใช้กับ HTML
• สิ่งที่เรียกว่า Selects, Properties , and Values - สิ่งที่เป็นองค์ประกอบของ CSS
• สี Colours - การใช้งานสี
• ข้อความ Text - การจัดการเกี่ยวกับขนาดและรูปร่างของข้อความ
• Margins and Padding - การจัดการพื้นที่ระหว่างสิ่งต่างๆ
• Borders - การจัดการเกี่ยวกับขอบ
• รวมส่วนประกอบต่างข้างบนเป็น CSS