in Ankur Mishra

Heart of a Layout: CSS Display Properties

Before starting any design, you need work on building blocks of that design, with a strong foundation, you always try new techniques, and creating something awesome that you’re proud of. So for gaining this proud, you should be aware with basics. I know you are an expert and Writing a good CSS is no different for you and it all starts with understanding 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, images block with different width and height, and many more. Web browsers that render to a screen defines their own style to govern the default layout of HTML elements. This CSS are called the user agent CSS, and are responsible for a mostly consistent experience across the different Web browsers.

For every HTML element that the WHATWG define some CSS. This CSS is not much different to the CSS we will write, and also can override. WHATWG defines display: block;  for body Tag automatically.

But we can change it in many ways, Like- display: none; OR anything else.

 Let’s understand the display properties: Experiments says <DIV> and <P> behave like same.

 :- Block -:

 p {

display:block;

margin: 0;

}

 

div{

display:block;

}

 

Here both div and p tags are assigned display: block;. Only one thing is different, <p> has some assigned margin. display: block; makes block-level elements, which have the following properties:

  • Bu Default – Occupy full width of a container.
  • Respect top / bottom padding and margin.

Given properties are very useful.

:- Inline -:

display: inline; 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 pages and these elements ignore most vertical and horizontal layouts. Also ignore the height, top and bottom padding and margin.

inline occupy only the width of their content block – as if they are shrink-wrapping around their 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 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 new lines with adjacent non-full width HTML elements.

 

:- Vertical Alignment -:

Other 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?

Simple way is to start your design by asking some yourself:

Screen Shot 2016-06-05 at 3.16.21 PM

Must Try these display properties carefully.

 

Write a Comment

Comment