css margin-top. margin-bottom
margin-top ใน CSS คือคุณสมบัติที่ใช้ในการกำหนดระยะขอบด้านบน (ระยะห่างภายนอก) ขององค์ประกอบ HTML. กล่าวอีกนัยหนึ่งคือ เป็นการเพิ่มพื้นที่ว่างระหว่างขอบบนขององค์ประกอบนั้นๆ กับขอบบนขององค์ประกอบอื่นที่อยู่ติดกัน หรือขอบของคอนเทนเนอร์.
รายละเอียดเพิ่มเติม:
ระยะขอบ (Margin):
margin ใน CSS เป็นคุณสมบัติที่ใช้ในการสร้างพื้นที่ว่างรอบองค์ประกอบ. มี 4 ด้าน: margin-top, margin-right, margin-bottom, และ margin-left.
margin-top:
กำหนดระยะขอบด้าน บนขององค์ประกอบ. ค่าที่กำหนดจะเพิ่มพื้นที่ว่างด้านบนขององค์ประกอบ.
การใช้งาน:
สามารถใช้ค่าตัวเลข (เช่น 10px, 20em) หรือค่าเปอร์เซ็นต์ (%) หรือ auto (ให้เบราว์เซอร์คำนวณ) หรือ inherit (สืบทอดค่าจากองค์ประกอบหลัก).
ค่าเป็นลบ:
อนุญาตให้ใช้ค่าลบได้ ซึ่งจะทำให้องค์ประกอบนั้นๆ เลื่อนเข้าใกล้ขอบด้านบนขององค์ประกอบอื่นมากขึ้น.
ความแตกต่างจาก padding-top:
margin-top เป็นระยะห่างภายนอก (พื้นที่ว่างรอบองค์ประกอบ) ในขณะที่ padding-top เป็นระยะห่างภายใน (พื้นที่ว่างระหว่างขอบด้านในขององค์ประกอบกับเนื้อหา).
margin-bottom ใน CSS คือคุณสมบัติที่ใช้กำหนดระยะห่างด้านนอก (margin) ด้านล่างขององค์ประกอบ HTML. กล่าวอีกนัยหนึ่งคือ มันจะเพิ่มพื้นที่ว่างระหว่างองค์ประกอบนั้นกับองค์ประกอบที่อยู่ด้านล่าง.
รายละเอียดเพิ่มเติม:
การใช้งาน:
margin-bottom เป็นหนึ่งในสี่คุณสมบัติของระยะขอบ (margin) ใน CSS ซึ่งอีกสามตัวคือ margin-top, margin-right, และ margin-left.
ค่าที่ใช้งานได้:
margin-bottom สามารถรับค่าได้หลายรูปแบบ เช่น:
ความยาว (length): เช่น 10px, 2em.
เปอร์เซ็นต์ (percentage): เช่น 10%.
auto: ให้เบราว์เซอร์คำนวณระยะขอบที่เหมาะสม.
ค่าลบ (negative values): ทำให้องค์ประกอบเลื่อนขึ้นไปใกล้กับองค์ประกอบด้านล่างมากขึ้น.
ผลลัพธ์:
เมื่อกำหนด margin-bottom ให้กับองค์ประกอบหนึ่ง จะมีการเพิ่มพื้นที่ว่างระหว่างองค์ประกอบนั้นกับองค์ประกอบที่อยู่ด้านล่างตามค่าที่กำหนด.
ตัวอย่าง:
margin-bottom: 20px; จะเพิ่มระยะห่างด้านล่าง 20 พิกเซล.
margin-bottom: auto; จะให้เบราว์เซอร์จัดการระยะห่างด้านล่างเอง.
margin-bottom: -10px; จะเลื่อนองค์ประกอบขึ้นไป 10 พิกเซล.
ความแตกต่างจาก Padding:
Margin:
เป็นพื้นที่ว่างภายนอกองค์ประกอบ (outside).
Padding:
เป็นพื้นที่ว่างภายในองค์ประกอบ (inside).
สรุป: margin-bottom เป็นคุณสมบัติ CSS ที่ใช้ค วบคุมระยะห่างด้านล่างขององค์ประกอบ ซึ่งมีประโยชน์ในการจัดรูปแบบและจัดวางองค์ประกอบต่างๆ บนหน้าเว็บ
เวลาแต่งหน้าเว็บ สิ่งที่ทำให้เลย์เอาต์ “หายใจได้” มักไม่ใช่แค่สีหรือฟอนต์ แต่คือระยะห่างระหว่างกล่องต่างๆ ซึ่งคำที่คนค้นบ่อยจะวนอยู่กับ margin top, margin bottom, margin-bottom (หรือเขียนติดเป็น marginbottom) และคำถามคลาสสิกอย่าง “padding คืออะไร?” สิ่งที่ผมใช้จำง่ายๆ คือคิดเป็น “กล่อง” (box model) - Margin = ระยะห่าง “นอกกล่อง” ใช้ดันกล่องให้ออกห่างจากเพื่อนบ้าน - Padding = ระยะห่าง “ในกล่อง” คือช่องว่างระหว่างขอบกล่องกับเนื้อหาด้านใน ตัวอย่างที่เจอบ่อย: ทำหัวข้อกับย่อหน้าติดกันเกินไป h2{ margin-bottom: 12px; } p{ margin-top: 0; margin-bottom: 16px; } ทริคคือมักจะกำหนดให้ p มี margin-top: 0 เพื่อไม่ให้ช่องว่างซ้ำซ้อนกับ margin-bottom ของหัวข้อ แล้วค่อยคุมระยะห่างด้านล่างของย่อหน้าแทน จะจัดระเบียบ spacing ได้ง่ายกว่า อีกเคสที่คนงง: margin เป็นเปอร์เซ็นต์อิงจากอะไร? หลายคนคิดว่า margin-top: 10% จะอิงจาก “ความสูง” แต่ใน CSS ทั่วไป ค่า % ของ margin-top/margin-bottom จะอิงจาก “ความกว้างของคอนเทนเนอร์” (width) เป็นหลัก เลยทำให้ช่องว่างดูแปลกถ้าจอเปลี่ยนขนาด ถ้าต้องการระยะห่างที่คงที่ มักเลือกใช้ px/rem จะคุมได้ตรงกว่า เรื่อง page margin diagram (top bottom left right) ที่ชอบค้นกัน: ถ้าคุณอยากกำหนดทุกด้านพร้อมกัน ใช้ shorthand จะไวมาก - margin: 20px; (บนขวาล่างซ้ายเท่ากัน) - margin: 10px 20px; (บน/ล่าง = 10, ซ้าย/ขวา = 20) - margin: 10px 20px 30px; (บน=10, ซ้าย/ขวา=20, ล่าง=30) - margin: 10px 20px 30px 40px; (บน ขวา ล่าง ซ้าย) แล้ว padding ก็มีรูปแบบเดียวกัน เช่น padding: 12px 16px; สุดท้าย ถ้าสงสัยว่าควรใช้ margin หรือ padding เมื่อไหร่: ถ้าคุณต้องการ “เว้นระยะระหว่างกล่องกับกล่อง” ให้ใช้ margin-top/margin-bottom แต่ถ้าต้องการ “เพิ่มพื้นที่ในกล่องให้เนื้อหาไม่ชิดขอบ” ให้ใช้ padding (เช่น ทำปุ่ม/การ์ดให้น่าอ่าน) วิธีนี้ช่วยให้จัดเลย์เอาต์เป็นระบบและแก้ปัญหาช่องว่างบน-ล่างได้เร็วขึ้นมาก
