เค้าโครง CSS - แสดง: inline-block
จอแสดงผล: ค่าบล็อกอินไลน์
เมื่อเปรียบเทียบกับdisplay: inlineความแตกต่างที่สำคัญคือdisplay: inline-blockช่วยให้กำหนดความกว้างและความสูงบนองค์ประกอบได้
นอกจากนี้ ด้วย
display: inline-blockระยะขอบด้านบนและด้านล่าง/ช่องว่างภายในจะได้รับการเคารพ แต่ด้วยdisplay: inlineเหตุนี้ กลับไม่เป็นเช่นนั้น
เมื่อเปรียบเทียบกับdisplay: blockความแตกต่างที่สำคัญคือdisplay: inline-blockไม่เพิ่มการขึ้นบรรทัดใหม่หลังองค์ประกอบ ดังนั้นองค์ประกอบจึงสามารถนั่งถัดจากองค์ประกอบอื่นๆ
ตัวอย่างต่อไปนี้แสดงพฤติกรรมต่างๆ ของdisplay: inline, display: inline-block
และdisplay: block:
ตัวอย่าง
span.a {
display: inline; /* the default for span */
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}
span.b {
display:
inline-block;
width: 100px;
height:
100px;
padding: 5px;
border: 1px
solid blue;
background-color: yellow;
}
span.c {
display: block;
width:
100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}
การใช้บล็อกอินไลน์เพื่อสร้างลิงก์การนำทาง
การใช้งานทั่วไปอย่างหนึ่งdisplay: inline-block
คือการแสดงรายการในแนวนอนแทนที่จะเป็นแนวตั้ง ตัวอย่างต่อไปนี้สร้างลิงค์การนำทางแนวนอน:
ตัวอย่าง
.nav {
background-color: yellow;
list-style-type: none;
text-align:
center;
padding: 0;
margin: 0;
}
.nav li {
display: inline-block;
font-size: 20px;
padding:
20px;
}