Introduction
Before starting any design, you need to work on the building blocks of that design. With a strong foundation, you can always try new techniques and create something awesome that you’re proud of. To gain this pride, you should be aware of the basics. I know you are an expert and know-how to write good CSS as it all starts with the understanding of what you’re working with before you write a single line of CSS. In a design, we have many blocks with different elements, like paragraph with full width, image block with a different width and height, etc. Web Browsers that render to a screen define their own style to govern the default layout of HTML elements. This CSS is called the user agent CSS and is responsible for a mostly consistent experience across the different web browsers.
For every HTML element, WHATWG define some CSS. This CSS is not different from the CSS we will write and also can override. WHATWG defines display: block; for body tag automatically.
We can change it in many ways, Like- display: none; OR anything else.
Let’s understand the display properties: Experiment says <DIV> and <P> behave the same.
Block
- p {
- display: block;
- margin: 0;
- }
-
- div {
- display: block;
- }
Here, both <div> and <p> tags are assigned for display: block. Only one thing is different, <p> has some assigned margin. The display: block makes block-level elements, which have the following properties,
- Bu Default Occupy full width of a container.
- Respect top/bottom padding and a margin.
Given properties are very useful.
Inline
display: inline;
This is a very important style. You can get this property in anchors, spans, strongs and a slew of other mostly typographical elements by default. Display: Inline; elements allow us to stack HTML tags next to each other, without affecting the layout of the pages and these elements ignore most vertical and horizontal layouts. Also ignore the height, top and bottom padding, and margin.
Inline occupies only the width of its content block – as if it is shrink-wrapping around the content.
inline-block
display: inline-block;
This property gives you the best of inline and block-level elements in one.
Block can be assigned explicit widths. They respect vertical margins and padding values.
Inline-block will stack with other non-full width elements until the content width reaches the full width of the content block, at which point it will always occupy its own line. Inline elements, in contrast, will always wrap to the new lines with the adjacent non-full width HTML elements.
Vertical Alignment
Another very helpful attribute of inline-block elements is that they also respect the vertical-align property for differing vertical Ys. Inline-block elements respect vertical properties while block elements don’t respect any vertical-alignment properties and inline elements respect vertical alignment.
When To Use What?
A simple way is to start your design is by asking something yourself:
One must try these display properties carefully.