CSS में Display Block के साथ कार्य करना

ब्लॉक मान के साथ CSS Display प्रॉपर्टी एक एलिमेंट को पैरेंट की पूरी उपलब्ध चौड़ाई के साथ रेंडर करती है, यह एक लाइन ब्रेक भी बाध्य करती है। ब्लॉक के रूप में display वाला एलिमेंट <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>

आउटपुट

यह निम्नलिखित आउटपुट देगा: