why we set diaplay:block in Label CSS layout

Hi Pratyush,

Good question.

The best way I can explain it is to show you. Go into the main.css and add a border property to the label selector:

label {
  display: block;
  margin-bottom: 8px;
  border: 1px black solid;
}

Now you can see what display: block; looks like by using this temporary border. You can see how much space it takes up.

The block element will take up the width of its surrounding container.

Now leave that temporary border property in place and change the display to "inline":

label {
  display: inline;
  margin-bottom: 8px;
  border: 1px black solid;
}

You will see that the border shrunk and the element now only takes up the width of the label's text. You will also notice that there is now less space between the label and the input field below it. Here are the key differences between block an inline level elements:

Block-level elements +Take full-width (100% width) by default +Each gets displayed in a new line +Width & height properties can be set +Can contain other block or inline elements

Inline elements +Take only as much space as they need +Displayed side by side +Don’t accept width or height properties, and top-bottom margin +Can be a parent of other inline elements

I took those bullet points from this article:

https://medium.com/better-programming/understanding-css-display-none-block-inline-and-inline-block-63f6510df93

Hope this helps and Happy Coding! Heidi