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

เขียนเมื่อ 12 ปีก่อน โดย Ninenik Narkdee
css padding margin

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ css padding margin



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

 

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

 

 



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



กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ





Tags:: css padding margin







URL สำหรับอ้างอิง











เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ