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
Davide Pugliese
4,091 PointsWouldn't introducing in-line and block properties be a good idea at this point in time referring to ul, li, img?
I think at this point in time of the course it might be a good idea to introduce in-line, block properties for the in-line element selectors containing img elements. For example, when we place an img element inside an a element, which is another in-line element, in order to avoid problems, in my experience, is a good thing to declare the selector of the in-line element with the property display:block;
What do you think about it? Am I wrong?
2 Answers
Davide Pugliese
4,091 PointsOK, I sorted this thing out. I assumed all the elements used to display texts like h1, h2, etc. were using display:in-line by default (probably it's like this in the frameworks that I used).
This is an answer I found on a website of developers:
"display: block; creates a block-level element, whereas display: inline; creates an inline-level element. It's a bit difficult to explain the difference if you're not familiar with the css box model, but suffice to say that block level elements break up the flow of a document, whereas inline elements do not.
Some examples of block level elements include: div, h1, p, and hr HTML tags.
Some examples of inline level elements include: a, span, strong, em, b, and i HTML tags."
Davide Pugliese
4,091 PointsThis is the definition in the course which is one video after the one I had just watched:
Block-Level Elements - Block elements occupy the width of their containers and generally >include a line break before and after the element.
Inline Elements - Inline elements occupy the width of their contents and do not begin a new >line when formatted as text.
So it's kind of clear that, even if it sounds a lil bit tricky at first, also h1, p (even though they are used for text) are block elements by default, because when you see them in your browser they add a line break at the end.
OK, I am sorry for this maybe useless thread, but at least I sorted this thing out in my mind once and for all. :)