Display as Inline Block
The last display option we will look at is displaying an element as inline block, which, as the name suggests, is a combination of block-level and inline display.
Displaying as inline block behaves like inline display, with the difference that we can set the width and height (If we set the width of the element to the width of the parent, it will behave like a block-level element).
The best example of an element displayed as inline block is an image (img).
To set an element to display inline block, we use the following declaration: display: inline-block;
Instructions
We have prepared 3 division elements (div) for you. As you can see, the div elements are normally block-level and therefore displayed one below the other. Set their display property to inline block.
In the selector .square, change the width property from 100px to 40% (this will set the width of the element to 40% of the page width).
Notice that the third square no longer fits on one line and cleverly moves to the next line.
Start programming for free
4/10