Beginner’s guide to CSS display properties : inline ,block, inline-block

If you have been using HTML, you would have definitely come across tags like <div>,<span>,<p>,<a> and many more. But, did you take the time to understand how the content is being displayed in these elements? Or did you notice the different ways that these elements treat properties like padding, margin, width, and height. In this article, we will dive deeper into these aspects of elements.

Let’s start with understanding what is display property? As the name suggests, display property controls the display behavior of an element. Every element has its own default value for display according to its nature.

We will look into three different type of display value :

1.display : inline

Inline level elements:

• Occupies just the width it requires to display the content
• Does not break into a new line. Displayed side by side.

Some inline elements : <span>,<a>,<b>,<input>,<i>

You cannot set the following properties on inline elements:

• width
• height
• padding(top, bottom)
• margin(top, bottom)

Style applied to <span>