We can use the display property to change the visibility or positioning of an element, relative to another.
On this html page, we have setup four style definitions.
One for each
<div> that we have in our html
The first definition is for the container
It specifies the
<div> will have a width and height of 400px and a 1px black border.
Inside the container, we have three additional divs, with id div1, div2, and div3.
<div> has a width and height property set to 50px.
If we take a look at this file in our browser, we can see that by default each nested
<div> falls below the other.
Though, what if we wanted each
<div> to be displayed next to the other, in a line.
To do that we can add the display property to each
<div>, and set the value to inline-block.
Let's refresh our page to see the result.
Now they are all in line.
We can also set the display property to none, if we want to make an element invisible.