PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

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

25 September 2008 By


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

 

 



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


Tags:: padding css margin





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