Layout in CSS

Layout in CSS

Display Property

This property is one of the important properties of CSS. This property specifies whether an element will display in a way, or even display. Every HTML element has a default display value. This value depends on what type of element it is. The default display value of an element is either 'block' or 'inline'.

Block element or block level element: -

A block element always starts with a new line and takes the full width of its parent element.

For example <div>, <p>, <from>, <header>, <footer>, etc.

Inline element: -

An inline element does not start with the new line and starts from the same line and only takes as much width as needed. For example, if we border a link, we will see that the link occupies a certain width.

a {

border: 1px solid black;

}

<a href= "#"> click </a>

There are some examples of the inline element

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

display: none;

If we do not want to display any element, we can give value to none of the property displays of CSS.

For example

<style>

p {

display: none;

}

</ style>

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

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

Overriding the default display value of element: - As we have seen before, every HTML element has a default display value. For example The default display value of the <div> element is 'block' and the default display value of <span> is 'inline'. If we want, we can also change the display value of an element. For example, <a> is an inline element, so a new line does not start. If we want, we can display <a> as a block element.

e.g.

<style>

div a {

display: block;

}

</ style>

<div>

<a href= "#"> Link 1 </a>

<a href= "#"> Link 2 </a>

</ div>

Similarly, we can also reverse it, i.e. can also inline display any block level element.

For example, We have two divs. If we do not display property on them -

<div> Test 1 </ div>

<div> Test 2 </ div>

Now if we apply display property to these -

<style>

div {

display: inline;

}

</ style>

<div> Test 1 </ div>

<div> Test 2 </ div>