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 How to Make a Website Adding Pages to a Website Style New Pages

Ryan Maneo
Ryan Maneo
4,342 Points
Posted by Ryan Maneo
Ryan Maneo
4,342 Points

I don't really understand what display: block; does.

Can someone please clarify this for me?

Adam Overby
Adam Overby
711 Points

How come using 

display: block;

automatically displays as center alignment?

3 Answers

Dwayne Pate
Dwayne Pate
12,249 Points
Dwayne Pate
Dwayne Pate
12,249 Points

Consider an inline HTML element, say an image. If I write this:

<img src="bandw.jpg" width="200">
<img src="bandw.jpg" width="200">

the images apper on the same line. If I set 

img {
display: block 
}

in CSS, my images are now treated like block level elements. They take up the entire space of the line they are on, forcing the next element on to a new line.

Brian Jensen
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree seal-36
Brian Jensen
Treehouse Staff
Brian Jensen
.a{fill-rule:evenodd;}techdegree seal-36
Brian Jensen
Treehouse Staff

Yeah block elements take up 100% of the containers width. There is display:inline-block; to fix that issue of horizontal lists.

This is a good video about it: https://teamtreehouse.com/library/css-basics/the-box-model/display-values

Joseph Carrillo
Joseph Carrillo
2,137 Points
Joseph Carrillo
Joseph Carrillo
2,137 Points

Hello all,

Still a little confused to block and inline styles. I understand block level elements are ones that take up new lines such as: h1, p tags, divs, etc.

inline are just that they are elements that go inline with the rest of the elements. Such as: a tags, img tags, etc.

my understanding that setting it to block will set it to a new line with the rest of the block level elements. So for the example above will set to a new line if you had to images. Is that correct? Also, i you had two images like the images above you can use block-inline how we did with the portfolio page? Is that correct?

I am not quite understanding why we use to block styling for the image. Is it because we wanted to start with a new line. Then apply the styling to make it center?

Thanks, JC

Joseph Carrillo
Joseph Carrillo
2,137 Points

I am new to Tree house by the way.