คุณสมบัติ CSS Display ด้วยค่า block เรนเดอร์องค์ประกอบด้วยความกว้างเต็มของพาเรนต์ และบังคับการขึ้นบรรทัดใหม่ องค์ประกอบที่มี display เป็น block จะเรนเดอร์เหมือนองค์ประกอบ <div> หรือ <p>
ไวยากรณ์
ไวยากรณ์ของ CSS display block มีดังนี้:
Selector { display: block; }
ตัวอย่าง
ลองดูตัวอย่างของ CSS display block:
<!DOCTYPE html> <html> <head> <title>CSS Display Block</title> <style> form { width:70%; margin: 0 auto; text-align: center; } * { padding: 2px; margin:5px; } input[type="button"] { border-radius: 10px; } em{ background-color: #C303C3; color: #fff; display:block; } </style> </head> <body> <form> <fieldset> <legend>CSS-Display-Block</legend> <label for="textSelect">Formatter: </label> <input id="textSelect" type="text" placeholder="John Doe"> <input type="button" onclick="convertItalic()" value="Check"> <div id="divDisplay"></div> </fieldset> </form> <script> var divDisplay = document.getElementById("divDisplay"); var textSelect = document.getElementById("textSelect"); function convertItalic() { for(i=0; i<2; i++){ var italicObject = document.createElement("EM"); var italicText = document.createTextNode(textSelect.value); italicObject.appendChild(italicText); divDisplay.appendChild(italicObject); } } </script> </body> </html>
ผลลัพธ์
จะได้ผลลัพธ์ดังนี้:
ก่อนคลิกปุ่ม 'Check':
หลังคลิกปุ่ม 'Check':
ตัวอย่าง
ลองดูตัวอย่างเพิ่มเติมของ CSS Display block:
<!DOCTYPE html> <html> <head> <style> #flex { display: flex; } #none { display: none; } .inline-block { display: inline-block; background-color: mintcream; } .grid { display: grid; background-color: cornflowerblue; } div { margin: 30px; padding: 5px; height: 10px; line-height: 5px; text-align: center; background-color: lightblue; border: 2px solid black; } div > div { background-color: lightpink; border: 2px solid green; } div > div > div { background-color: sandybrown; border: 2px solid darkred; } </style> </head> <body> <div><span id="flex">heyyy</span> <div><span id="none">heyyy</span> <div> <span class="inline-block">heyyy</span> <span class="inline-block">heyyy</span> <div> <span class="grid">heyyy demo</span> <span class="grid">heyyy demo</span> </div> </div> </div> </div> </body> </html>
ผลลัพธ์
จะได้ผลลัพธ์ดังนี้:
