อะไรคือความแตกต่างพื้นฐานระหว่าง CSS ต่อไปนี้:
display:inlineและนี่:
display:blockการใช้สิ่งเหล่านี้แยกกันในองค์ประกอบฉันได้รับผลลัพธ์เดียวกัน
คำตอบ:
display: blockหมายถึงองค์ประกอบที่แสดงเป็นบล็อกตามที่ย่อหน้าและส่วนหัวมาตลอด บล็อกมีช่องว่างด้านบนและด้านล่างและไม่มีองค์ประกอบ HTML อยู่ข้างๆยกเว้นเมื่อได้รับคำสั่งเป็นอย่างอื่น (โดยการเพิ่มการประกาศลอยไปยังองค์ประกอบอื่นเป็นต้น)
แสดง: อินไลน์หมายความว่าองค์ประกอบจะแสดงแบบอินไลน์ภายในบล็อกปัจจุบันในบรรทัดเดียวกัน เฉพาะเมื่ออยู่ระหว่างสองบล็อกองค์ประกอบจะสร้าง 'บล็อกที่ไม่ระบุตัวตน' แต่จะมีความกว้างน้อยที่สุดเท่าที่จะเป็นไปได้
อ่านเพิ่มเติมเกี่ยวกับตัวเลือกการแสดง: http://www.quirksmode.org/css/display.html
บล็อก
ใช้ความกว้างเต็มพร้อมกับบรรทัดใหม่ก่อนและหลัง (display: block;)
inline
ใช้ความกว้างเท่าที่ต้องการเท่านั้นและไม่บังคับขึ้นบรรทัดใหม่ (display: inline;)
display: block - เส้นแบ่งก่อนและหลังองค์ประกอบ
display: inline - ไม่มีการแบ่งบรรทัดก่อนหรือหลังองค์ประกอบ
นี่คือตารางเปรียบเทียบ:
สามารถดูตัวอย่างได้ที่นี่
display: block;สร้างองค์ประกอบระดับบล็อกในขณะที่display: inline;สร้างองค์ประกอบระดับอินไลน์ เป็นการยากที่จะอธิบายความแตกต่างหากคุณไม่คุ้นเคยกับโมเดลกล่อง css แต่ก็พอจะบอกได้ว่าองค์ประกอบระดับบล็อกจะแบ่งการไหลของเอกสารในขณะที่องค์ประกอบแบบอินไลน์ไม่ทำ
ตัวอย่างบางส่วนขององค์ประกอบระดับบล็อกรวมถึง: div, h1, pและhrแท็ก HTML
ตัวอย่างบางส่วนขององค์ประกอบระดับอินไลน์รวมถึง: a, span, strong, em, bและiแท็ก HTML
โดยส่วนตัวแล้วฉันชอบคิดว่าองค์ประกอบแบบอินไลน์เป็นองค์ประกอบการพิมพ์ สิ่งนี้ไม่ถูกต้องทั้งหมดหรือถูกต้องในทางเทคนิค แต่สำหรับองค์ประกอบอินไลน์ส่วนใหญ่จะทำงานคล้ายกับข้อความมาก
คุณสามารถอ่านผ่านบทความในหัวข้อที่นี่ เมื่อเห็นคนอื่น ๆ หลายคนในกระทู้นี้ได้ยกมามันอาจจะคุ้มค่าที่จะอ่าน
แสดง: บล็อกจะใช้เวลาทั้งบรรทัดเช่นโดยไม่มีการแบ่งบรรทัด
การแสดงผล: อินไลน์จะใช้พื้นที่เฉพาะที่ต้องการเท่านั้น
#block
{
display : block;
background-color:red;
border:1px solid;
}
#inline
{
display : inline;
background-color:red;
border:1px solid;
}องค์ประกอบบล็อกจะขยายเพื่อเติมเต็มระดับบนสุด
องค์ประกอบแบบอินไลน์จะใหญ่พอที่จะอุ้มลูกได้
จอแสดงผล: บล็อก
ใช้เวลาทั้งแถว (100%) ของหน้าจอซึ่งจะเท่ากับ 100% ของขนาดหน้าจอเสมอ
display: inline-blockใช้ความกว้างเท่าที่จำเป็นโดยอาจมีขนาด 1% ถึง 100% ของขนาดหน้าจอ
นั่นคือสาเหตุที่เรามีdiv และ span
สไตล์เริ่มต้น Div คือบล็อกการแสดงผล: ใช้ความกว้างทั้งหมดของหน้าจอ
รูปแบบเริ่มต้นของ span คือ display: inline block: span ไม่เริ่มต้นในบรรทัดใหม่และใช้ความกว้างเท่าที่จำเป็นเท่านั้น
เพิ่มสีพื้นหลังให้กับองค์ประกอบและคุณจะเห็นความแตกต่างของอินไลน์กับบล็อกตามที่ผู้โพสต์อื่นอธิบายไว้
ดิสเพลย์: บล็อกมันทำงานเหมือนกับแท็ก 'p' เป็นอย่างมากและจะใช้ทั้งแถวและจะไม่มีองค์ประกอบใด ๆ อยู่ข้างๆจนกว่าจะลอย การแสดงผล: แบบอินไลน์มันใช้พื้นที่มากเท่าที่ต้องการและอนุญาตให้องค์ประกอบอื่น ๆ จัดแนวข้างตัวมันเอง
ใช้คุณสมบัติเหล่านี้ในกรณีของแบบฟอร์มและคุณจะเข้าใจดีขึ้น
บล็อกหรืออินไลน์บล็อกสามารถมีความกว้างได้ (เช่นความกว้าง: 400px) ในขณะที่องค์ประกอบอินไลน์จะไม่ได้รับผลกระทบจากความกว้าง องค์ประกอบแบบอินไลน์สามารถขยายไปยังบรรทัดถัดไปของข้อความ (ตัวอย่างเช่นhttp://codepen.io/huijing/pen/PNMxXLปรับขนาดหน้าต่างเบราว์เซอร์ของคุณเพื่อดูสิ่งนั้น) ในขณะที่องค์ประกอบบล็อกไม่สามารถทำได้
.inline {
background: lemonchiffon;
div {
display: inline;
border: 1px dashed darkgreen;
}องค์ประกอบบล็อก : องค์ประกอบที่ชอบ div, p ส่วนหัวเป็นระดับบล็อก เริ่มต้นจากบรรทัดใหม่และใช้ความกว้างเต็มขององค์ประกอบหลัก องค์ประกอบแบบอินไลน์ : องค์ประกอบที่ชอบ b, i, span, img อยู่ในระดับอินไลน์ พวกเขาไม่เคยเริ่มจากบรรทัดใหม่และใช้ความกว้างของเนื้อหา
โดยค่าเริ่มต้นองค์ประกอบแบบอินไลน์จะไม่บังคับให้ขึ้นบรรทัดใหม่ในโฟลว์เอกสาร ในทางกลับกันองค์ประกอบของบล็อกมักทำให้เกิดการแบ่งบรรทัดคุณสามารถอ้างอิง ลิงค์นี้