Chapter 11CSS Tutorial~1 min read
CSS Display Property
block, inline, inline-block, none
CSS display property specify करते की element document flow मध्ये कसे behave करेल — block, inline, flex, grid, किंवा hidden. Display property समजल्यावर layout control येतो.
1. display: block
Block elements full available width घेतात आणि आधी-नंतर line break येतो. Width आणि height set करता येतो.
display: block
css
/* <div>, <p>, <h1>, <section> — default block elements */
div {
display: block;
width: 300px;
height: 100px;
background-color: lightblue;
margin: 10px 0;
/* पुढचा element नवीन line वर येतो */
}2. display: inline
Inline elements फक्त content एवढीच space घेतात. दुसरे elements बाजूला राहतात. Width/height/margin set करता येत नाही.
display: inline
css
/* <span>, <a>, <strong> — default inline elements */
span {
display: inline;
background-color: lightblue;
padding: 5px;
/* width/height set करता येत नाही! */
}3. display: inline-block
दोन्हींचे combination — elements बाजूला बसतात (inline सारखे) पण width/height set करता येते (block सारखे).
display: inline-block
css
.box {
display: inline-block;
width: 100px;
height: 50px;
background-color: orange;
margin: 5px;
text-align: center;
line-height: 50px;
}
/* 3 boxes एकाच row मध्ये बसतात, size पण control होतो */4. display: none — Element लपवणे
display: none vs visibility: hidden
css
.hidden {
display: none;
/* Element पूर्णपणे remove — space पण जात नाही */
}
.invisible {
visibility: hidden;
/* Element दिसत नाही पण space राहतो */
}- ▸display: none = element DOM मधून "remove" — space नाही, दिसत नाही
- ▸visibility: hidden = element invisible — space कायम असतो, दिसत नाही
✅ Key Points — लक्षात ठेवा
- ▸block: full width, line break — div, p, h1 default
- ▸inline: content width, no line break — span, a default
- ▸inline-block: side by side + width/height control
- ▸none: remove from layout | hidden: invisible but space remains
- ▸flex, grid — layout साठी पुढे शिकू
0/16 chapters पूर्ण