Working with the display property in CSS

You already know that all tags belong to a certain block model. If you want, however, you can change the model using the display property. Using the block value of this property, you can make the element block-level, and using the inline value, you can make it inline-level.

Let's make the span tags behave like block elements:

html<span>text</span>
<span>text</span>
<span>text</span>

cssspan {
  display: block;
  width: 100px;
  height: 100px;
  border: 1px solid red;
  margin-bottom: 20px;
}

Результат:

Now let's make the div tags behave like lowercase:

html<div>text</div>
<div>text</div>
<div>text</div>

cssdiv {
  display: inline;
  width: 100px;
  height: 100px;
  border: 1px solid red;
}

Результат: