auto ทำอะไรในระยะขอบ: 0 auto?

126

สิ่งที่ไม่autoทำmargin:0 auto;?

ดูเหมือนฉันจะไม่เข้าใจว่าautoมันคืออะไร ฉันรู้ว่าบางครั้งมันมีผลต่อการจัดวัตถุให้อยู่ตรงกลาง ขอบคุณ

css

189

เมื่อคุณระบุwidthบนวัตถุที่คุณใช้margin: 0 autoกับวัตถุนั้นจะอยู่ตรงกลางภายในคอนเทนเนอร์หลัก

การระบุautoเป็นพารามิเตอร์ที่สองโดยทั่วไปจะบอกให้เบราว์เซอร์กำหนดระยะขอบซ้ายและขวาโดยอัตโนมัติซึ่งทำได้โดยการตั้งค่าให้เท่ากัน รับประกันว่าระยะขอบซ้ายและขวาจะถูกกำหนดให้มีขนาดเท่ากัน พารามิเตอร์ตัวแรก 0 บ่งชี้ว่าระยะขอบบนและล่างจะถูกตั้งค่าเป็น 0

margin-top:0;
margin-bottom:0;
margin-left:auto;
margin-right:auto;

ดังนั้นเพื่อให้คุณเป็นตัวอย่างหากพาเรนต์คือ 100px และลูกคือ 50px autoคุณสมบัติจะกำหนดว่ามีพื้นที่ว่าง 50px ที่จะแชร์ระหว่างmargin-leftและmargin-right:

var freeSpace = 100 - 50;
var equalShare = freeSpace / 2;

ซึ่งจะให้:

margin-left:25;
margin-right:25;

ลองดูjsFiddleนี้ คุณไม่จำเป็นต้องระบุความกว้างหลักเฉพาะความกว้างของวัตถุลูก

— djdd87
แหล่งที่มา

แต่เราไม่เคยกำหนดความกว้างใด ๆ ที่bodyเรามักจะให้widthและmargin:0 autoไป#wrapper

— Jitendra Vyas

ตกลงจากนั้นระยะขอบระหว่างร่างกายและวัตถุจะถูกคำนวณโดยเบราว์เซอร์โดยอัตโนมัติ

— Jitendra Vyas

มีค่าใกล้เคียงกัน%หรือไม่? ฉันหมายถึงมีคุณสมบัติอื่น ๆ ใน css ที่สามารถให้ผลลัพธ์เหมือนกันเช่นซ้ายและขวาauto

— Jitendra Vyas

@GenericTypeTea - และเกิดอะไรขึ้นในmargin:auto 0สภาพ?

— Jitendra Vyas

อย่างไรก็ตามเหตุใดเมื่อฉันใช้ margin: 20 auto ดูเหมือนว่าจะมีผลต่อการวางตำแหน่งซ้าย - ขวา ดูเหมือนว่าทั้งหมดที่ฉันทำคือเพิ่มขอบบน / ล่าง ...

— pitosalas

13

อัตโนมัติ: เบราว์เซอร์กำหนดระยะขอบ ผลลัพธ์ของสิ่งนี้ขึ้นอยู่กับเบราว์เซอร์

margin: 0 auto ระบุ

* top and bottom margins are 0
* right and left margins are auto

— หน้าแข้ง
แหล่งที่มา

9

จากข้อกำหนด CSS เกี่ยวกับการคำนวณความกว้างและระยะขอบสำหรับระดับบล็อกองค์ประกอบที่ไม่ถูกแทนที่ในขั้นตอนปกติ :

หากทั้ง 'margin-left' และ 'margin-right' เป็น 'auto' ค่าที่ใช้จะเท่ากัน สิ่งนี้จัดกึ่งกลางองค์ประกอบในแนวนอนโดยเทียบกับขอบของบล็อกที่มี

— ต้นกระเจี๊ยบ
แหล่งที่มา

"ค่าที่ใช้มีค่าเท่ากัน" หมายความว่าอย่างไร?

— Jitendra Vyas

3

@ metal-gear-solid - ถ้าความกว้างของผู้ปกครอง (กำหนดโดยเบราว์เซอร์หรือตามความกว้างที่ระบุ) คือ 100px และความกว้างของ div ของลูกคุณคือ 50px จากนั้นระยะขอบ: 0 อัตโนมัติจะกำหนดว่ามีพื้นที่ว่าง 50px จากนั้นจะหารมันด้วย 2 ให้ 25 จากนั้นระยะขอบซ้ายและขวาจะถูกกำหนดเป็น 25 นั่นคือค่าจะถูกกำหนดให้เท่ากัน

— djdd87

1

ค่าที่ใช้อ้างถึงค่าที่ใช้จริงโดยขึ้นอยู่กับคุณสมบัติภาพที่แท้จริงขององค์ประกอบที่ใช้คุณสมบัตินี้และบล็อกที่มีอยู่ ส่วนที่เชื่อมโยงมีสูตรที่ใช้ในการคำนวณความแตกต่างในแนวนอนระหว่างองค์ประกอบและบล็อกที่มีอยู่ จากนั้นความแตกต่างนั้นจะถูกแบ่งออกอย่างเท่าเทียมกันและใช้เป็นค่าขอบแนวนอนที่แท้จริง

— Gumbo

6

margin:0 auto;

0มีไว้สำหรับบน - ล่างและautoสำหรับซ้าย - ขวา หมายความว่าระยะขอบซ้ายและขวาจะใช้ระยะขอบอัตโนมัติตามความกว้างขององค์ประกอบและความกว้างของคอนเทนเนอร์

โดยทั่วไปหากคุณต้องการวางองค์ประกอบใด ๆ ที่ตำแหน่งกึ่งกลางจะmargin:autoทำงานได้อย่างสมบูรณ์ แต่ใช้ได้เฉพาะในองค์ประกอบบล็อก

— user3237573
แหล่งที่มา

1

margin-top:0;
margin-bottom:0;
margin-left:auto;
margin-right:auto;

0 สำหรับบน - ล่างและอัตโนมัติสำหรับซ้าย - ขวา เบราว์เซอร์กำหนดระยะขอบ

— จาฟเฟอร์ sathick
แหล่งที่มา

1

จะชัดเจนขึ้นเมื่อมีคำอธิบายว่าค่าทั้งสองทำงานอย่างไร

คุณสมบัติระยะขอบเป็นชวเลขสำหรับ:

margin-top
margin-right
margin-bottom
margin-left

แล้วค่าแค่สองอย่างนั้นมาได้อย่างไร?

คุณสามารถแสดงระยะขอบด้วยค่าสี่ค่าดังนี้:

margin: 10px, 20px, 15px, 5px;

ซึ่งจะหมายถึงด้านบน 10px, ด้านขวา 20px, ด้านล่าง 15px, ด้านซ้าย 5px

ในทำนองเดียวกันคุณสามารถแสดงด้วยสองค่าเช่นนี้:

margin: 20px 10px;

สิ่งนี้จะทำให้คุณมีระยะขอบ 20px ด้านบนและด้านล่างและ 10px ซ้ายและขวา

และถ้าคุณตั้งค่า:

margin: 20px auto;

นั่นหมายถึงระยะขอบบนและล่าง 20px และขอบซ้ายและขวาของอัตโนมัติ และอัตโนมัติหมายความว่าระยะขอบซ้าย / ขวาจะถูกกำหนดโดยอัตโนมัติตามคอนเทนเนอร์ หากองค์ประกอบของคุณเป็นองค์ประกอบประเภทบล็อกหมายความว่าเป็นช่องและใช้ความกว้างทั้งหมดของมุมมองจากนั้นจะตั้งค่าระยะขอบซ้ายและขวาโดยอัตโนมัติและด้วยเหตุนี้องค์ประกอบจึงอยู่ตรงกลาง

— แองกัสคอมเบอร์
แหล่งที่มา

-3

เป็นการเปลี่ยนแท็ก "center" ที่เสีย / ยากมาก มีประโยชน์เมื่อคุณต้องการโต๊ะที่เสียหายและไม่ทำงานตรงกลางสำหรับบล็อกและข้อความ

— แดนนี่
แหล่งที่มา