CSS Display Property

The display property determines how an element behaves:

• block – takes full width, starts on a new line
• inline – takes only the space it needs, stays in the same line
• inline-block – behaves like inline but allows setting width and height
• none – hides the element

Example:

<style>
span {
  display: block;
  background: lightgreen;
  margin: 5px;
}
</style>

<span>Block 1</span>
<span>Block 2</span>

Practice Task:
Create an inline navigation menu and then switch it to block layout.