องค์ประกอบที่ถูกบล็อกเทียบกับองค์ประกอบแบบอินไลน์ใน HTML: ทำไมถึงแตกต่าง?

ความแตกต่างระหว่างองค์ประกอบของบล็อกและอินไลน์ดูเหมือนจะแปลกสำหรับฉันเสมอ ความแตกต่างทั้งหมดคือองค์ประกอบบล็อกใช้ความกว้างทั้งหมดจึงบังคับให้มีการแบ่งบรรทัดก่อนและหลังองค์ประกอบและองค์ประกอบอินไลน์จะใช้เวลามากเท่าเนื้อหา ทำไมไม่เพียงแค่มีองค์ประกอบหนึ่งประเภท - องค์ประกอบแบบอินไลน์ที่คุณสามารถใช้ความสูง / ความกว้างที่กำหนดเองและใช้สิ่งนั้นได้ คุณต้องการแบ่งบรรทัดหรือไม่ แทรก<br />หรืออาจเพิ่มแท็กพิเศษใน CSS สำหรับลักษณะการทำงานนั้น วิธีที่ตอนนี้ฉันไม่เห็นมันแก้ปัญหาใด ๆ และแทนที่จะบังคับเฉพาะคุณสมบัติที่ในความเห็นของฉันควรได้รับการตัดสินโดยนักออกแบบ

ทำไมทั้งสองประเภท?

คุณพูด:

คุณต้องการแบ่งบรรทัดหรือไม่ แทรก<br />หรืออาจเพิ่มแท็กพิเศษใน CSS สำหรับลักษณะการทำงานนั้น วิธีที่ตอนนี้ฉันไม่เห็นมันแก้ปัญหาใด ๆ และแทนที่จะบังคับเฉพาะคุณสมบัติที่ในความเห็นของฉันควรได้รับการตัดสินโดยนักออกแบบ

คุณอยู่ในเส้นทางที่ถูกต้อง - สไตล์ควรได้รับการตัดสินโดยนักออกแบบ

แต่คุณมีปัญหาในทางตรงกันข้าม การแทรก<br/>แท็กเป็นตัวเลือกที่ "บังคับให้คุณสมบัติที่ควรตัดสินใจโดยผู้ออกแบบ" - ภายในเอกสารมาร์กอัปเมื่อ<br/>มีแล้วก็อยู่ที่นั่น - และด้วย CSS ที่ยุ่งยาก / แฮ็กกี้เท่านั้นที่คุณสามารถลบผลกระทบได้

elementsในทางตรงกันข้าม/ บล็อกเป็นองค์ประกอบที่มีสไตล์ล้วนๆโดยมีค่าเริ่มต้นที่สะดวกสำหรับกรณีการใช้งานทั่วไป สถานที่ให้บริการภาพตัวเองสามารถเปลี่ยนได้ทันทีโดยนักออกแบบ CSS ด้วยหรือdisplay:inlinedisplay:block

Take เช่นองค์ประกอบทั่วไปสำหรับการนำทางวันนี้ <li>- สิ่งเหล่านี้เป็นblockองค์ประกอบเริ่มต้นแต่นักออกแบบจะทำให้พวกเขาfloatปรากฏแบบอินไลน์ ( blockมีคุณสมบัติพิเศษมากกว่าแค่รับทั้งบรรทัด แต่นั่นคือการสนทนาสำหรับอีกวัน)

องค์ประกอบส่วนใหญ่มีการจัดรูปแบบมาตรฐาน ... คำถามของคุณอาจขยายออกไปเพื่อบอกว่าการจัดรูปแบบนี้ควรเป็นการตัดสินใจของนักออกแบบเช่นกันและควรลบออก ฉันมักจะคิดว่ามันเป็นจุดเริ่มต้นและลบการจัดรูปแบบถ้าจำเป็น (มักจะไม่) แต่ในที่สุดก็มีบางสิ่งที่เป็นธรรมชาติ หากคุณมีย่อหน้าเช่นคุณคาดหวังว่ามันจะเป็นองค์ประกอบบล็อกเพราะนั่นคือลักษณะของวรรค ไม่ว่าองค์ประกอบจะมีการตั้งค่าเริ่มต้นเช่น block หรือ inline ก็ตามฉันต้องการความสามารถในการระบุตัวเลือกนี้ เหตุผลที่ฉันพูดแบบนี้คือ IMO ที่สะอาดกว่าเพื่อทำลายสิ่งนี้ด้วยการขว้าง<br />ใน HTML มันทำสิ่งเดียวกันหรือไม่? ใช่. แต่ด้วยความก้าวหน้าล่าสุดใน HTML ความพยายามอย่างมากมุ่งเน้นที่การทำให้มันเป็นภาษาที่มีความหมายมากขึ้นซึ่งคุณจะใส่ HTML ลงไปน้อยลงเท่าที่การจัดรูปแบบเกิดขึ้นและมากขึ้นใน CSS <br />วิธีการแบ่งบรรทัดซึ่งโดยทั่วไปจะหมายถึงการแบ่งสายในวรรคหรือโครงสร้างประโยคที่มีอื่น ๆ ในท้ายที่สุดมันไม่สำคัญสำหรับฉัน แต่โดยส่วนตัวฉันต้องการความสามารถในการบล็อกและความแตกต่างแบบอินไลน์ดังนั้นฉันหวังว่าพวกเขาจะไม่ลบมันออกจากฝั่ง CSS อย่างน้อย!

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

มาร์กอัปเป็นเรื่องเกี่ยวกับความหมายไม่แสดง อันที่จริงผู้ออกแบบมีอิสระที่จะปฏิบัติต่อองค์ประกอบใด ๆ ที่เป็นค่าเริ่มต้นในรูปแบบบล็อกเป็นแบบอินไลน์และในทางกลับกัน

ในLaTeXมีสองโหมด (ไม่รวมโหมดคณิตศาสตร์): โหมดแนวนอนและโหมดแนวตั้ง องค์ประกอบ (ตัวอักษร) เป็นกล่องขนาดเล็กที่สะสม "แนวนอน" ในย่อหน้า จากนั้นกล่องขนาดใหญ่เหล่านี้จะสะสมในแนวตั้ง สิ่งนี้คล้ายกับ (X) HTML: อินไลน์และบล็อก

ฟังดูเหมือนปัญหาของความเข้ากันได้ย้อนหลังกับฉัน องค์ประกอบแบบอินไลน์อาจเป็นส่วนเพิ่มเติมในภายหลังของมาตรฐาน HTML และเพื่อให้หน้าเว็บที่เขียนในปี 1992 ยังคงสามารถดูได้ในปี 2011 มันยังคงได้รับการสนับสนุนเหมือนมีหน้าเว็บเก่าอายุ 19 ปีออกมาที่นั่น ... !

ฉันคิดว่าโหมดการแสดงผลแตกต่างกันมากระหว่างบล็อกและอินไลน์นั่นคือความแตกต่างที่คุ้มค่าในระดับมาร์กอัป