Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML HTML Forms Organizing Forms The Label Element

why we set diaplay:block in Label CSS layout

why we set display:block in label css . I didn't get it

1 Answer

Heidi Fryzell
.a{fill-rule:evenodd;}techdegree seal-36
Heidi Fryzell
Front End Web Development Treehouse Moderator 25,178 Points

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:


Hope this helps and Happy Coding! Heidi