“ ขอบด้านบน คุณสมบัติ ” ช่วยนักพัฒนาจำนวนมากในการสร้างเลย์เอาต์ที่ตอบสนองและวางตำแหน่งองค์ประกอบ HTML การใช้คุณสมบัติ 'margin-top' ช่วยให้ควบคุมองค์ประกอบ HTML ได้มากขึ้น เพิ่มการแยกภาพ และช่วยในการสร้างการออกแบบที่ตอบสนองได้ดีขึ้น คู่มือนี้แสดงคุณสมบัติของ Margin-top พร้อมการใช้งานจริงใน CSS
- คุณสมบัติ 'margin-top' คืออะไร?
- ใช้คุณสมบัติ 'margin-top' ด้วยค่าบวก
- ใช้คุณสมบัติ 'margin-top' ที่มีค่าเป็นลบ
คุณสมบัติ 'margin-top' คืออะไร?
“ ขอบด้านบน คุณสมบัติ ” ใช้สำหรับสร้างช่องว่างเพิ่มเติมระหว่างองค์ประกอบ HTML สามารถตั้งค่าได้ทั้งค่าบวกและค่าลบ ค่าเหล่านี้ถูกกำหนดตามความต้องการของการออกแบบและช่วยป้องกันการซ้อนทับและการปรับระยะห่างระหว่างองค์ประกอบ HTML
วิธีการใช้คุณสมบัติ 'margin-top' ด้วยค่าบวก?
คุณสมบัติ 'margin-top' ที่มีค่าบวกจะเพิ่มระยะห่างพิเศษจากตำแหน่งบนสุดไปยังกึ่งกลางขององค์ประกอบ HTML ที่เลือก ค่าที่ระบุสามารถเป็นพิกเซล เปอร์เซ็นต์ rem หรือค่าส่วนกลาง เช่น อัตโนมัติ สืบทอด ไม่ได้ตั้งค่า ฯลฯ ให้เราอธิบายตัวอย่างเพื่อความเข้าใจที่ดีขึ้น:
ตัวอย่าง: การใช้ค่าบวก
ให้เราถือว่าไฟล์ HTML ที่สร้าง “ หลังจากสร้างโครงสร้าง HTML แล้ว ให้นำคุณสมบัติของ CSS ไปใช้กับ “ เชิงบวก ' ระดับ: ในข้อมูลโค้ดด้านบน: หลังจากดำเนินการส่วนย่อยของโค้ดด้านบนแล้ว หน้าเว็บจะมีลักษณะดังนี้: gif ด้านบนแสดงให้เห็นถึงผลกระทบของการตั้งค่าของคุณสมบัติระยะขอบบนหน้าเว็บ “ ขอบด้านบน คุณสมบัติ ” ที่มีค่าลบตั้งค่าระยะห่างพิเศษจากตำแหน่งบนสุดตรงข้ามกับกึ่งกลางหรือไปทางด้านนอกของหน้าเมื่อเทียบกับองค์ประกอบ HTML ที่เลือก ส่วนใหญ่จะใช้สำหรับการสร้างเอฟเฟกต์ที่ทับซ้อนกันหรือในการวางตำแหน่งขององค์ประกอบ HTML ให้เราเดินผ่านตัวอย่างเพื่อความเข้าใจที่ดีขึ้น ตัวอย่าง: การใช้ค่าลบ ให้เราถือว่าไฟล์ HTML ที่สร้าง “ คำอธิบายของข้อมูลโค้ดที่ระบุข้างต้นมีอธิบายไว้ด้านล่าง: หลังจากดำเนินการตามส่วนย่อยของโค้ดข้างต้น หน้าเว็บจะปรากฏดังนี้: gif ด้านบนแสดงผลที่เกิดขึ้นกับการออกแบบของหน้าเว็บโดยการตั้งค่าลบสำหรับคุณสมบัติระยะขอบด้านบน “ ขอบด้านบน คุณสมบัติ ” ใช้สำหรับสร้างช่องว่างเพิ่มเติมระหว่างองค์ประกอบ HTML สามารถตั้งค่าได้ทั้งค่าบวกและค่าลบ หากคุณสมบัติ 'margin-top' ถูกกำหนดด้วยค่าบวก พื้นที่พิเศษนั้นจะถูกเพิ่มไปยังกึ่งกลางของหน้าเว็บหรือองค์ประกอบ HTML ที่เลือก ในกรณีที่ค่า 'ลบ' ช่องว่างจะถูกเพิ่มเข้าไปแต่ด้านนอกของหน้า บทความนี้จะสาธิตคุณสมบัติของ Margin-top ใน CSS
< ร่างกาย >
< แผนก ระดับ = 'เชิงบวก' >
< หน้า > มีการกำหนดระยะขอบด้านบนด้วยค่าบวก หน้า >
แผนก >
ร่างกาย >
< สไตล์ >
.เชิงบวก {
ความกว้าง: 300px;
ความสูง: 200px;
สีพื้นหลัง: ป่าสีเขียว;
ขนาดตัวอักษร: 20px;
สี: #ff;
ขอบด้านบน: 50px;
}
สไตล์ >
วิธีใช้คุณสมบัติ 'margin-top' ที่มีค่าเป็นลบ
.เชิงลบ {
สี: ขาว;
จัดข้อความ: กึ่งกลาง;
สีพื้นหลัง: สีแดง ;
ขอบบน: -30px ;
ช่องว่างภายใน: 30px;
ความสูง: 100px;
}
สไตล์ >
< ร่างกาย >
< แผนก ระดับ = 'เชิงลบ' >
ค่าลบถูกกำหนด สำหรับ คุณสมบัติ Margin-top
แผนก >
ร่างกาย >
บทสรุป