Display or not display ?
The display is a property that specifies the display behavior of an element. It means that it tells you if the "box" takes all of the width of the line or not, if we can change the value of height and width or not.
Demo
You will see below the behavior of each element :
Display : BLOCK
All elements are blocked by default. It means that when you create a tag in your HTML, everything will be one above the other like blocks that we stack.
Take all of the width of the parent element
CAN change the size BUT still blocks any other element on the same line
Still blocks any other element on the same line AND can align it anywhere in horizontal
Display : INLINE
All elements with display inline will take up as mush space as needed. You will find elements next to the other.
CANNOT change the size.
Take a look on DevTools and try to change the size, it doesn't work.
Only takes up as much space as it needs to.
Element sit next to the other inline.
Display : INLINE-BLOCK
It a mix with display inline and display block. Elements will sit next to the other BUT can have padding, margin or height.
CAN ONLY change height, width, padding and margin TOP and BOTTOM
Element
sit next to the other inline.
Try to
change width.
Every boxes just shift
Display : NONE
Remove the element as if it didn't exist.
Here some text to fill the box. I hope you enjoy the website, I try to make something colorful and fun.
My favourite text : Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto, labore consequuntur! Officiis magnam similique placeat labore quos omnis dolores possimus, molestias ipsa fugit dolore eveniet unde, corrupti odio aliquid necessitatibus.
It's a joke :P
