To talk about css display properties, we can’t but discuss briefly about how elements occupy space in html.
There are two types of html elements. Inline and Block level elements.
Inline elements take up the same space as their content i.e. the element contained within their tags. The elements are displayed in a line side by side from the left . The elements will only wrap to the next line if the content can’t fit on the same line within it’s container. Some common inline elements are anchor tags, span, strong, etc.
Block elements on the other hand are the same height as the content contained between their tags, but they span the entire width of their containing element, even if the content itself doesn’t. This is why block elements always start on a new line and stack on top of each other. Majority of elements are block. Some common ones are paragraphs, headings, article, section, etc.
The display property can be used to change the default behaviour of inline and block-level elements, using a value of block, inline, or inline-block.
For block elements, setting the width and height will change the size of the element, but not the display behaviour. The elements will still stack on top of each other.
For inline elements, adding width and height has no effect. This is where the display property can be used to adjust the default behaviour.
Adding
display: block
to an inline element will make it display like block elements. The width and height will be applied, and the elements are also stacked on top of each other, just like block elements.
Setting
display: inline
to a block element will give it the characteristics of inline elements. The elements will be displayed on the same line, and the width and height no longer applies.
There is one more important value which is inline-block. This will apply the characteristics of both Inline and Block.
display: inline-block
Using these properties help us separate content from style. You may want your elements to display on a new line, or on the same line, but instead of picking an HTML element that looks a particular way, choose the most semantic element for the content, and then change the display with CSS.
CSS POSITIONING
The position property can also be used to change the flow of the our document. There are 5 different position values. Each responsible for a different type of positioning.
Static is the initial value, which means elements are not positioned. The 4 other values:
relative, absolute, fixed, and sticky,
are positioned by arranging elements relative to its current position, its containing element, or the browser view port.
For all of these values, except static, the top, right, bottom, or left properties must also be suit to specify the placement of the positioned elements.
Relative positioning. It is the only positioned element that stays in the layout flow, so no changes is evident until at least one offset property is added. So, for example, if a top value of 10 pixels, and a right value of 30 pixels, is added to a box in a relative position, it pushes the box 10 pixels away from the top of it's current position, and 30 pixels away from the right of it's current position. Relative positioning does not affect the flow of the other elements.
Position absolute, Imagine there's a fixed box and an absolite box, and the fixed box was stacked below the absolute box, adding the
position: absolute
will have the absolute box move behind the fixed box because the absolute box has been removed from the normal flow. The fixed box will move up to fill the empty spot.
Elements with absolute positioning are relative to it's closest positioned ancestor element. If that exists, it will be relative to the body element.
Now the last one, the sticky positioning.
For example, when
position: sticky
and a top value of 10 pixels is added to an element, with sticky positioning, it stays in the initial spot until you scroll the page.
Conclusively, it may be tempting to use the position property for page layouts, since you can arrange them in specific positions. But positioning shouldn't be used in this way, since it takes the element out of the stacking order and the normal flow, with the exception of relative. Stick to using position for styling smaller page components such as a fixed navigation bar, rather than large page layout blocks.
Top comments (0)