Get Adobe Flash player

CSS : Margin and Padding

ในการออกแบบเว็บไซต์ให้มีความสวยงาม หลักการหนึ่งที่นำมาใช้บ่อยๆ นั่นก็คือ Space (ที่ว่าง) สำหรับเว็บไซต์แล้ว ที่ว่างก็นับว่ามีความสำคัญไม่น้อย การจัดองค์ประกอบให้มีที่ว่างจะทำให้ข้อมูลดูไม่แน่นจนเกินไป และสามารถเพิ่มความน่าอ่านได้เช่นกัน ในการใช้ CSS ส่วนหนึ่งที่ใช้กำหนดระยะห่างของส่วนประกอบต่างๆเพื่อสร้างที่ว่างดังกล่าว ก็ได้แก่การกำหนด Margin และ Padding 

 

ข้อแตกต่างระหว่าง Magin และ Padding 

  • Margin คือ การกำหนดระยะห่างระหว่างขอบของวัตถุ”ด้านนอก”กับวัตถุอื่นๆ เช่น การเว้นระยะขอบของพื้นที่ content กับตาราง
  • Padding คือ การกำหนดระยะห่างระหว่างขอบของวัตถุ”ด้านใน”กับวัตถุที่อยู่ภายใต้กรอบ เช่น การเว้นระยะขอบของพื้นที่ระหว่างกรอบตาราง กับตัวอักษรข้างใน

แต่ว่า การกำหนดระยะห่างทั้งสองรูปแบบจะเขียนในฟอร์มที่เหมือนกัน ดังนี้

 

รูปแบบการเขียนกำหนด Margin

1

  • margin-top คือ เว้นระยะขอบบน
  • margin-bottom คือ เว้นระยะขอบล่าง
  • margin-right คือ เว้นระยะขอบขวา
  • margin-left คือ เว้นระยะขอบซ้าย

กรณีต้องการเขียนให้สั้นลง จะเขียนในรูปแบบ

2

ส่วนสำคัญจะอยู่ที่ค่าด้านหลัง จะใส่ได้ตั้งแต่ 1 ไปจนถึง 4 ค่า ซึ่งให้ความหมายที่แตกต่างกัน ตามตัวอย่างดังนี้

  • margin: 25px 50px 75px 100px;
    • ค่าที่ 1 (25 px) หมายถึง เว้นระยะขอบบน 25 px
    • ค่าที่ 2 (50 px) หมายถึง  เว้นระยะขอบขวา 50 px
    • ค่าที่ 3 (75 px) หมายถึง  เว้นระยะขอบล่าง 75 px
    • ค่าที่ 4 (100 px) หมายถึง  เว้นระยะขอบซ้าย 100 px
  • margin: 25px 50px 75px;
    • ค่าที่ 1 (25 px) หมายถึง เว้นระยะขอบบน 25 px
    • ค่าที่ 2 (50 px) หมายถึง  เว้นระยะขอบซ้ายและขวา ด้านละ 50 px
    • ค่าที่ 3 (75 px) หมายถึง  เว้นระยะขอบล่าง 75 px
  • margin: 25px 50px;
    • ค่าที่ 1 (25 px) หมายถึง เว้นระยะขอบบนและล่าง ด้านละ 25px
    • ค่าที่ 2 (50 px) หมายถึง  เว้นระยะขอบซ้ายและขวา ด้านละ 50px
  • margin: 25px;
    • หมายถึง เว้นระยะขอบทุกด้าน ด้านละ 25px

 

รูปแบบการเขียนกำหนด Padding

3

  • padding-top คือ เว้นระยะขอบบน(ด้านใน)
  • padding-bottom คือ เว้นระยะขอบล่าง(ด้านใน)
  • padding-right คือ เว้นระยะขอบขวา(ด้านใน)
  • padding-left คือ เว้นระยะขอบซ้าย(ด้านใน)

กรณีต้องการเขียนให้สั้นลง จะเขียนในรูปแบบ

4

ส่วนสำคัญจะอยู่ที่ค่าด้านหลัง จะใส่ได้ตั้งแต่ 1 ไปจนถึง 4 ค่า คล้ายกับการกำหนดค่า Margin

Leave a Reply

Your email address will not be published. Required fields are marked *