Display Property

Display Property

HTML tags are divided into inline and block elements.

Block elements are placed one below the other on the page. That is, the labels after that element continue from the bottom line. For example, tags such as h1-h6, p, div are of block type, and the content after these tags continues from the bottom.

Inline elements are placed inline. For example, tags such as b , i, u, a, font, img continue to be placed on the same line.

These properties of the desired tags can be changed using the display property:

Important Info : The width and height properties are not available for Inline type tags. If we want to give width or height to a label of inline type with css, we must convert that label to block type.

On the other hand, the Inline-Block property allows a label to be placed both inline and to have width and height properties.

The float property is used to place the Block type elements side by side, and then the clear property is used to return the layout to normal. If we convert the labels we want to be placed side by side into inline-block , we will not need to use the float and clear properties.

You can find the float and clear properties in our next topic.

Display:none; When we use it as a form, we can hide the html elements on the page. The element to which this feature is applied is not deleted, it is hidden on the page and does not take up any space.

Visibility: hidden; We can also ensure that the desired elements do not appear. However, in this method, the html element will continue to occupy space even if it is not visible on the page.

EXERCISES