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 Objects Images

Images can be inline with paragraphs

could someone please explain to me whether images and paragraphs are inline elements or not and what is the implication of being an inline vs a block element?

2 Answers

The inline element means exactly what is says: element that is in line. So the paragraph is NOT an inline element, because it doesn't fit in one line. Example of an inline element would be a link, or a form input/output that is in line with the text. Inline elements are normally displayed without starting a new line.

A block element stands on its own. Block level elements normally start (and end) with a new line when displayed in a browser.

An image can be both inline or block. But 99% of the time images are used as block elements.

So if image is set to be an inline object - you'd have text <image> text. And if that image is higher then just one line it would take all the space it needs, and then be folowed with the text.

If the image is set to block, you would have text <image> and then some more text.

The paragraph is a block element and the image is an inline element. The block element means that it ocupies the whole row, it doesn't accept anything in his left or his right unless it has a specified width or float. The inline element means that is goes along with the text flow, it will behave like a normal text, unless you give it display block with css.