ฉันไม่แน่ใจว่าฉันเข้าใจความแตกต่างระหว่างสองสิ่งนี้ครบถ้วนหรือไม่
ใครช่วยอธิบายได้ไหมว่าทำไมฉันถึงใช้อันอื่นและแตกต่างกันอย่างไร
ฉันไม่แน่ใจว่าฉันเข้าใจความแตกต่างระหว่างสองสิ่งนี้ครบถ้วนหรือไม่
ใครช่วยอธิบายได้ไหมว่าทำไมฉันถึงใช้อันอื่นและแตกต่างกันอย่างไร
คำตอบ:
topมีไว้สำหรับปรับแต่งองค์ประกอบด้วยการใช้positionคุณสมบัติ
margin-topมีไว้สำหรับการวัดระยะทางภายนอกไปยังองค์ประกอบที่สัมพันธ์กับก่อนหน้านี้
นอกจากนี้topพฤติกรรมที่อาจแตกต่างกันขึ้นอยู่กับชนิดของตำแหน่งabsolute, หรือrelativefixed
คุณจะใช้ระยะขอบหากคุณต้องการย้ายองค์ประกอบ (บล็อก) ออกจากองค์ประกอบอื่น ๆ ในโฟลว์เอกสาร นั่นหมายความว่ามันจะผลักองค์ประกอบต่อไปนี้ออกไป / ไกลออกไป โปรดทราบว่าระยะขอบแนวตั้งขององค์ประกอบบล็อกที่อยู่ติดกันจะยุบลง
หากคุณต้องการองค์ประกอบที่จะไม่มีผลกระทบต่อองค์ประกอบโดยรอบที่คุณต้องการใช้การวางตำแหน่ง (เอบีเอส. rel.) และtop, bottom, leftและrightการตั้งค่า
ด้วยการrelativeวางตำแหน่งองค์ประกอบจะยังคงใช้พื้นที่เดิมเมื่อวางตำแหน่งแบบคงที่ นั่นเป็นเหตุผลที่ไม่มีอะไรเกิดขึ้นถ้าคุณเพียงแค่เปลี่ยนจากstaticการrelativeตำแหน่ง จากนั้นคุณสามารถผลักมันข้ามองค์ประกอบโดยรอบ
ด้วยการabsoluteวางตำแหน่งคุณจะลบองค์ประกอบออกจากโฟลว์เอกสาร (แบบคงที่) อย่างสมบูรณ์ดังนั้นมันจะเพิ่มพื้นที่ว่าง จากนั้นคุณสามารถวางตำแหน่งได้อย่างอิสระ - แต่สัมพันธ์กับองค์ประกอบตำแหน่งที่ไม่คงที่ที่ดีที่สุดถัดไปที่ห่อหุ้มไว้รอบ ๆ หากไม่มีก็จะยึดทั้งหน้า
Margin ใช้และขยาย / ทำสัญญาขอบเขตปกติขององค์ประกอบ แต่เมื่อคุณเรียกด้านบนคุณจะเพิกเฉยต่อตำแหน่งปกติขององค์ประกอบและลอยไปยังตำแหน่งเฉพาะ
ตัวอย่าง:
html:
<div id="some_element">content</div>
css:
#some_element {margin-top: 50%}
หมายความว่าองค์ประกอบจะเริ่มแสดง html ที่ความสูง 50% ของคอนเทนเนอร์ (เช่น div ที่แสดงคำว่า "content" จะแสดงที่ความสูง 50% ขององค์ประกอบที่มีโหนด div หรือ html โดยตรงก่อน div # some_element) แต่ถ้าคุณเปิด ตัวตรวจสอบของเบราว์เซอร์ (f12 บน Windows หรือ cmd + alt + i บน mac) และวางเมาส์เหนือองค์ประกอบคุณจะเห็นว่ามีการเน้นขอบเขตและสังเกตว่าองค์ประกอบถูกผลักลงแทนที่จะวางตำแหน่งใหม่
ในทางกลับกัน:
#some_element {top: 50%}
จริงๆแล้วจะเปลี่ยนตำแหน่งองค์ประกอบหมายความว่าจะยังคงแสดงที่ 50% ของคอนเทนเนอร์ แต่จะเปลี่ยนตำแหน่งองค์ประกอบดังนั้นขอบเริ่มต้นที่ 50% ขององค์ประกอบที่มีอยู่ กล่าวอีกนัยหนึ่งจะมีช่องว่างระหว่างขอบขององค์ประกอบและภาชนะบรรจุ
ไชโย!
topคุณสมบัติเป็นที่พักตำแหน่ง มันจะใช้กับpositionสถานที่ให้บริการเช่นหรือabsolute เป็นคุณสมบัติขององค์ประกอบrelativemargin-top
จากไบต์:
"ระยะขอบคือช่องว่างระหว่างขอบของกล่องขององค์ประกอบและขอบของกล่องที่สมบูรณ์เช่นขอบของตัวอักษร" ด้านบน "จะแทนที่ขอบขอบขององค์ประกอบจากกล่องบล็อกที่มีเช่นกระดาษชิ้นเดียวกันที่อยู่ด้านใน กล่องกระดาษแข็ง แต่ไม่ชิดขอบภาชนะ "
ความเข้าใจของฉันคือ margin-top สร้างระยะขอบบนองค์ประกอบและด้านบนตั้งค่าขอบด้านบนขององค์ประกอบด้านล่างขอบด้านบนขององค์ประกอบที่มีอยู่ที่ออฟเซ็ต
คุณสามารถลองได้ที่นี่:
http://w3schools.com/css/tryit.asp?filename=trycss_position_top
เพียงแค่แทนที่ด้านบนด้วย margin-top เพื่อดูความแตกต่าง