<img> ระดับบล็อกองค์ประกอบหรือระดับอินไลน์หรือไม่

163

ฉันได้อ่านบางที่<img>องค์ประกอบนั้นทำงานเหมือนทั้งสอง ถ้าถูกต้องมีใครช่วยอธิบายด้วยตัวอย่างได้ไหม

html css image

189

มันเป็นความจริงพวกมันทั้งคู่ - หรือมากกว่านั้นคือพวกมันเป็นองค์ประกอบ "บล็อกอินไลน์" ซึ่งหมายความว่าพวกเขาไหลแบบอินไลน์เช่นข้อความ แต่ยังมีความกว้างและความสูงเช่นองค์ประกอบบล็อก

ใน CSS คุณสามารถตั้งค่าองค์ประกอบdisplay: inline-blockให้ทำซ้ำพฤติกรรมของรูปภาพ *

รูปภาพและวัตถุที่รู้จักกันว่าองค์ประกอบ "แทนที่" เนื่องจากพวกเขาไม่มีเนื้อหาต่อ se องค์ประกอบจึงถูกแทนที่ด้วยข้อมูลไบนารี

* โปรดทราบว่าเบราว์เซอร์ใช้งานทางเทคนิคdisplay: inline(เท่าที่เห็นในเครื่องมือสำหรับนักพัฒนา) แต่พวกเขากำลังให้การดูแลเป็นพิเศษกับรูปภาพ inline-blockพวกเขายังคงปฏิบัติตามทุกลักษณะของ

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

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

— Donato

22

คำตอบนี้ไม่ถูกต้องทางเทคนิค imgองค์ประกอบที่พูดอย่างแม่นยำไม่ใช่องค์ประกอบinline-blockแต่จริงๆแล้วinlineองค์ประกอบ คุณสามารถตรวจสอบในเบราว์เซอร์ที่ทันสมัยโดยคลิกขวาที่ภาพคลิก "ตรวจสอบองค์ประกอบ" display: inlineแล้วดูรูปแบบการคำนวณซึ่งจะแสดงให้เห็น inline-blockไม่มีบริบทบล็อกที่เกิดขึ้นภายในแท็กเป็นดังนั้นจึงเป็นเรื่องไม่ถูกต้องที่จะเรียกว่า สำหรับข้อมูลเพิ่มเติมเกี่ยวกับองค์ประกอบแบบอินไลน์แทนที่เห็นคำตอบของเควนตินของและบทความ MDN นี้

— Maximillian Laumeister

@ Max ที่ลิงค์นั้นไม่เกี่ยวข้องกับองค์ประกอบที่ถูกแทนที่

— DisgruntledGoat

@DisgruntledGoat ลิงก์ที่ฉันโพสต์ไม่ได้บอกว่าimgองค์ประกอบเป็นแบบอินไลน์ - เครื่องมือ Google Chrome dev แสดงimgองค์ประกอบเป็นแบบอินไลน์ โพสต์นี้เป็นที่เดียวที่ฉันค้นพบที่บอกว่าพวกเขามาinline-blockแทน ที่น่าสนใจฉันไม่ได้พบว่ามีอำนาจใด ๆ ที่กล่าวว่าพวกเขาเป็นinlineอย่างใดอย่างหนึ่ง เป็นวิธีการรักษาแท็กการติดตั้งใช้งานอาจจะ?

— Maximillian Laumeister

2

@ Max ตามนี้องค์ประกอบที่แทนที่อยู่นอกขอบเขตของรูปแบบการจัดรูปแบบ CSS ไม่มีข้อมูลจำเพาะของ HTML หรือ CSS ระบุว่ารูปภาพเป็นแบบอินไลน์ display:inline-blockดังนั้นไม่ว่าสิ่งที่เบราว์เซอร์บอกว่ามันเป็นภาพที่ได้รับการปฏิบัติเหมือนพวกเขาถูกกำหนดให้

— DisgruntledGoat

53

imgองค์ประกอบเป็นองค์ประกอบแบบอินไลน์แทนที่

มันทำงานเหมือนองค์ประกอบอินไลน์ (เพราะเป็น) แต่การสรุปบางอย่างเกี่ยวกับองค์ประกอบแบบอินไลน์ไม่ได้ใช้กับimgองค์ประกอบ

เช่น

การวางทั่วไป: "ความกว้างไม่ได้ใช้กับองค์ประกอบแบบอินไลน์"

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

เนื่องจากรูปภาพเป็นองค์ประกอบแบบอินไลน์ที่ถูกแทนที่จึงไม่มีผล

— เควนติน
แหล่งที่มา

13

องค์ประกอบ IMG เป็นแบบอินไลน์หมายความว่าหากไม่มีการลอยองค์ประกอบเหล่านี้จะไหลในแนวนอนด้วยข้อความและองค์ประกอบแบบอินไลน์อื่น ๆ

พวกเขาเป็นองค์ประกอบ "บล็อก" ที่พวกเขามีความกว้างและความสูง แต่พวกเขาทำงานเหมือน "บล็อกอินไลน์" ในแง่นั้น

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

7

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

img.center {display:block;margin:0 auto;}

img.left {float:left;margin-right:10px;}

img.right  {float:right;margin-left:10px;}

img.border  {border:1px solid #333;}

— มอนแทนาฟลินน์
แหล่งที่มา

2

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

— สัญลักษณ์
แหล่งที่มา

0

มันเป็นความจริงพวกมันทั้งคู่ - หรือมากกว่านั้นคือพวกมันเป็นองค์ประกอบ "บล็อกอินไลน์" ซึ่งหมายความว่าพวกเขาไหลแบบอินไลน์เช่นข้อความ แต่ยังมีความกว้างและความสูงเช่นองค์ประกอบบล็อก

— Modaser Sadat
แหล่งที่มา