CSS Layout — display: inline-block

เค้าโครงการแสดง inline-block แต่ละค่าก็จะมีความแตกต่างกัน การกำหนดค่าของ display ก็จะมีดังนี้

display: inline    //เรียงกันแนวนอน และมีพื้นที่จำกัด
display: inline-block    //เรียงกันแนวนอนและมีพื้นที่ด้านใน ตามที่เรากำหนด
display: block   //เรียงกันแนวตั้ง และมีพื้นที่จำกัด

The display

คือการจัดรูปแบบของ Box ให้เป็นแแบบแนวตั้ง แนวนอน และมีพื้นที่ด้านใน และในตัวอย่างนี้จะยกมาทั้ง 3 ค่า และที่เด่นๆ เห็นจะเป็น inline-block คือเขาจะ นำ Box มาเรียงกันในบรรทัดเดียว และยังมีพื้นที่ด้านนอกภายใน Box ให้ด้วย

CSS

span.a{
   display: inline;   //เปลี่ยนค่าได้ตามต้องการ
   width: 100px;   //ความกว้างของขอบ
   height: 100px;  //ความสูงของขอบ
   color: black;   //สีตัวอักษร
   padding: 5px;   //ขยายขอบ
   border: 1px solid blue;   //ความหนา รูปแบบ สีของเส้นขอบ
   background-color: yellow;   //สีพื้นหลัง
}

HTML

<div class="container p-3">
    <h2>The display Property</h2>
    <div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque elit sit amet consequat. Aliquam erat volutpat. gravida nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet.
   </div>
   <span class="a">Aliquam</span>
   <span class="a">venenatis</span>
</div>

The display: inline Value . ภาพตัวอย่าง

The display: inline-block Value . ภาพตัวอย่าง

The display: block Value . ภาพตัวอย่าง

Using inline-block to Create Navigation Links

การนำ inline-block มาใช้กับการลิงค์ เพื่อให้ เรียงแถวกันในบรรทัดเดียว ดังภาพตัวอย่างด้านล่างนี้

display: inline-block;

CSS

.nav {
   background-color: yellow;   //สีพื้นหลัง
   text-align: center;    //อยู่ตรงกลาง
   margin: 0;    //ระยะขอบ 
   padding: 0;    //ขยายขอบ
}
.nav li {
   display: inline-block;    //อยู่ในบรรทัดเดียวกัน มีค่าตามที่กำหนด 
   font-size: 20px;     //ขนาดของตัวอักษร
   padding: 20px;       //ขยายขอบ
}

HTML

<div class="container p-3">
   <h2>Horizontal Navigation Links</h2>
   <ul class="nav">
      <li><a href="#home">Home</a></li>
      <li><a href="#abot">About Us</a></li>
      <li><a href="#our">Our Clients</a></li>
      <li><a href="#contact">Contact Us</a></li>
   </ul>
</div>

การนำ inline-block มาใช้กับการลิงค์ เพื่อให้ เรียงแถวกันในบรรทัดเดียว ลองปรับใช้กันดูนะคะ