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 trialRyan Maneo
4,342 PointsI don't really understand what display: block; does.
Can someone please clarify this for me?
3 Answers
Dwayne Pate
12,249 PointsConsider 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
Treehouse StaffYeah 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
2,137 PointsHello 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
2,137 PointsI am new to Tree house by the way.
Adam Overby
711 PointsAdam Overby
711 PointsHow come using
display: block;
automatically displays as center alignment?