Layout in CSS

Layout in CSS

Display Property

यह Property CSS की महत्‍वपूर्ण properties में से एक हैं। यह property यह specify करती हैं कि कोई element किस रूप में display होगा, या फिर display होगा भी या नहीं। हर HTML element की एक default display value होती हैं। यह value इस बात पर depend करती हैं कि वह element किस type का हैं। element की default display value या तो ‘block’ होती हैं या ‘inline’।

Block element या block level element :-

एक block element हमेशा एक नई line से start होता हैं और अपने parent element की full width लेता हैं।

For e.g. <div>, <p>, <from>, <header>, <footer>, etc.

Inline element :-

Inline element नई line से start न होकर same line से start होता हैं और केवल उतनी ही width लेता हैं जितनी की जरूरत हो। उदाहरण के लिए यदि हम किसी link को border दें तो हम देखेंगे कि वह link एक निश्चित width ही occupy कर रही हैं।

a{
border: 1px solid black;
}

<a href = “#”>click</a>

Inline element के कुछ example हैं

<span>, <img>, <a> etc.

display: none;

यदि हम किसी element को display नहीं करना चाहते तो हम css की property display की value none दे सकते हैं।

For e.g.

<style>
p{
display: none;
}
</style>

<div>This is text inside div</div>
<p>This is text inside paragraph</p>

Output :- This is text inside div

इस example में p element display नहीं होगा।

Overriding the default display value of element :- जैसा कि हमने पहले देखा, हर html element की default display value होती हैं। For e.g. <div> element की default display value ‘block’ होती हैं और <span> की default display value ‘inline’ होती हैं। यदि हम चाहें तो किसी element की display value change भी कर सकते हैं। उदाहरण के लिए <a> एक inline element हैं, इसलिए नई line से start नहीं होता। यदि हम चाहें तो <a> को block element की तरह display कर सकते हैं।

e.g.

<style>
div a{
display: block;
}
</style>
<div>
<a href = “#”>Link 1</a>
<a href = “#”>Link 2</a>
</div>

Output :-
Link 1
Link 2

ऊपर दिए example में, यदि हम display की value block नहीं देते तो <a> element inline display होते हैं क्‍योंकि <a> की default display value ‘inline’ होती हैं। तब हमें output कुछ इस तरह दिखता हैं।

Output :- Link 1 Link 2

ठीक इसी तरह हम इसका उल्‍टा भी कर सकते हैं, यानि किसी block level element को inline display भी कर सकते हैं।

For e.g. हमारे पास दो div हैं। यदि हम उन पर display property apply न करें तो –

<div>Test 1</div>
<div>Test 2</div>

Output :-
Test 1
Test 2

अब यदि हम इन पर display property apply करें तो –

<style>
div{
display: inline;
}
</style>
<div>Test 1</div>
<div>Test 2</div>

Output :- Test 1 Test 2