คำสั่ง inline, block, และ inline-block เป็นค่าของ display property ใน CSS ซึ่งเป็นส่วนสำคัญในการจัดแสดงและการจัดตำแหน่งของ elements บนหน้าเว็บไซต์
inline – block – inline-block ใน css
นี่คือตัวอย่างโค้ด CSS ที่ใช้ display property และค่า inline, block, และ inline-block
/* แสดงเป็น inline */
span {
display: inline;
}
/* แสดงเป็น block */
div {
display: block;
}
/* แสดงเป็น inline-block */
button {
display: inline-block;
width: 100px;
height: 50px;
margin: 10px;
padding: 5px;
}
ในตัวอย่างนี้ span จะถูกแสดงเป็น inline, div จะถูกแสดงเป็น block, และ button จะถูกแสดงเป็น inline-block โดยมีการกำหนดความกว้าง ความสูง และ margin, padding ด้วย
inline: จะทำให้ element แสดงเป็น inline คล้ายกับการพิมพ์ข้อความ สามารถแสดงในบรรทัดเดียวกันได้ ไม่สามารถกำหนดความกว้างและความสูงได้ แต่สามารถกำหนด margin และ padding ได้
block: จะทำให้ element แสดงเป็น block คล้ายกับการพิมพ์หัวข้อ จะแสดงในบรรทัดแยกต่างหาก สามารถกำหนดความกว้างและความสูงได้ แต่ไม่สามารถแสดงในบรรทัดเดียวกันได้ และจะเริ่มใหม่ในบรรทัดใหม่ทุกครั้งที่มี element อื่นๆ มาแทรก
inline-block: จะทำให้ element แสดงเป็น inline แต่สามารถกำหนดความกว้างและความสูงได้ และสามารถแสดงในบรรทัดเดียวกันได้ ใช้งานได้ดีสำหรับ element ที่ต้องการเป็นแถวเดียวกันแต่ต้องการกำหนดความกว้างและความสูงของ element ได้
สมัยนี้ใช้เป็น FlexBox หรือ Bootstrap กันไปแล้ว
แบ่งปันกัน เราอยู่กันไม่เกิน 100 ปีหรอกครับ
สุดท้ายก็ทิ้งไว้ที่โลก จะคงเหลือไว้แต่คุณงามความดีที่ให้ระลึกถึงกันครับ
Follow Us / Thanat Sirikitphattana
นายช่างโยธา ศูนย์ก่อสร้างและบูรณะถนน 3 ส่วนก่อสร้างและบูรณะ 2 สำนักการโยธา
