อะไรคือความแตกต่างระหว่างinlineและinline-blockค่าของ CSS display?

คำตอบภาพ

ลองนึกภาพองค์ประกอบภายใน<span> <div>หากคุณให้<span>องค์ประกอบความสูง 100px และเส้นขอบสีแดงมันจะมีลักษณะเช่นนี้ด้วย

จอแสดงผล: อินไลน์

จอแสดงผล: บล็อกแบบอินไลน์

จอแสดงผล: บล็อก

รหัส: http://jsfiddle.net/Mta2b/

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

ความแตกต่างของสไตล์ที่รองรับเป็นข้อมูลสรุป:

• อินไลน์เพียงmargin-left, margin-right, padding-left,padding-right
• อินไลน์บล็อก : margin, padding, height,width

display: inline;เป็นโหมดการแสดงผลที่ใช้ในประโยค ตัวอย่างเช่นหากคุณมีย่อหน้าและต้องการเน้นคำเดียวที่คุณทำ:

<p>
    Pellentesque habitant morbi <em>tristique</em> senectus
    et netus et malesuada fames ac turpis egestas.
</p>

<em>องค์ประกอบมีdisplay: inline;โดยปริยายเพราะแท็กนี้มักใช้ในประโยค <p>องค์ประกอบมีdisplay: block;โดยปริยายเพราะมันไม่เป็นประโยคหรือในประโยคก็บล็อกของประโยค

องค์ประกอบที่มีdisplay: inline; ไม่สามารถมีheightหรือหรือแนวตั้งwidth marginเป็นองค์ประกอบที่มีความdisplay: block; สามารถมีwidth, และheight หากคุณต้องการที่จะเพิ่มไปยังองค์ประกอบคุณจะต้องตั้งองค์ประกอบนี้ ตอนนี้คุณสามารถเพิ่มองค์ประกอบและสไตล์บล็อกอื่น ๆ ทุกส่วน( ส่วนหนึ่งของ) แต่วางไว้ในประโยค ( ส่วนหนึ่งของ)margin
height<em>display: inline-block;heightblockinline-blockinlineinline-block

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

<div style="width: 350px">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  <div style="display: inline; background: #F00; color: #FFF">
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<hr/>
<div style="width: 350px">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  <div style="display: inline-block; background: #F00; color: #FFF">
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

คำตอบทั้งหมดข้างต้นให้ข้อมูลที่สำคัญเกี่ยวกับคำถามเดิม อย่างไรก็ตามมีลักษณะทั่วไปที่ดูเหมือนผิด

เป็นไปได้ที่จะกำหนดความกว้างและความสูงเป็นองค์ประกอบอินไลน์อย่างน้อยหนึ่งองค์ประกอบ (ซึ่งฉันคิดได้) - <img>องค์ประกอบ

ทั้งคำตอบที่ยอมรับได้ที่นี่และสถานะที่ซ้ำกันนี้เป็นไปไม่ได้ แต่สิ่งนี้ดูเหมือนจะไม่เป็นกฎทั่วไปที่ถูกต้อง

ตัวอย่าง:

img {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

<img src="#" />

imgมีdisplay: inlineแต่widthและheightที่ตั้งที่ประสบความสำเร็จ

คำตอบของ splattneอาจครอบคลุมทุกอย่างส่วนใหญ่ดังนั้นฉันจะไม่ทำซ้ำสิ่งเดียวกัน แต่: inlineและinline-blockประพฤติแตกต่างกับdirectionคุณสมบัติ CSS

ภายในตัวอย่างข้อมูลถัดไปที่คุณเห็นone two(เรียงตามลำดับ) จะแสดงผลเหมือนใน LTR layouts ฉันสงสัยว่าเบราว์เซอร์ที่นี่ตรวจพบส่วนภาษาอังกฤษโดยอัตโนมัติเป็นข้อความ LTR และแสดงผลจากซ้ายไปขวา

body {
  text-align: right;
  direction: rtl;
}

h2 {
  display: block; /* just being explicit */
}

span {
  display: inline;
}

<h2>
  هذا عنوان طويل
  <span>one</span>
  <span>two</span>
</h2>

แต่ถ้าผมไปข้างหน้าและชุดdisplayการinline-blockเบราว์เซอร์ที่ดูเหมือนจะเคารพในdirectionทรัพย์สินและทำให้องค์ประกอบจากขวาไปซ้ายในการสั่งซื้อเพื่อให้two oneมีการแสดง

body {
  text-align: right;
  direction: rtl;
}

h2 {
  display: block; /* just being explicit */
}

span {
  display: inline-block;
}

<h2>
  هذا عنوان طويل
  <span>one</span>
  <span>two</span>
</h2>

ฉันไม่ทราบว่ามีสิ่งอื่นใดที่เกี่ยวข้องกับเรื่องนี้หรือไม่ฉันพบเฉพาะในเชิงประจักษ์บน Chrome เท่านั้น