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!
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
Christopher Anderson
1,601 Pointswhat is a easy definiton inline and block element
hi I'm 14 years old and I plan on getting a career of being a web developer in my beginning year of high school and I just want a easy definition inline and block element .
3 Answers
Cem Salih
15,512 PointsWhen you display a element as a block element, it will always start on a new line and takes up the full width of space available. When you display a element as a inline element, it doesnt start on a new line and only takes up the space required.
An example would be having a image gallery, and wanting your images to display one on top of each, vertically. You would give your images the block element. Each image will know start on a new line and not allow anything next to it. But if you wanted your images to align next to each other, on the same line, then you would use the inline element.
I hope this helps! Good luck :)
Tushar Singh
Courses Plus Student 8,692 PointsA block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).Basically its a big box and it will take up a whole space and the next element will be on the next line.
for eg---> Check this out, now div is a block element http://www.w3schools.com/html/tryit.asp?filename=tryhtml_div_capitals
On the other hand an inline element does not start on a new line and only takes up as much width as necessary. For eg---> http://www.w3schools.com/html/tryit.asp?filename=tryhtml_span_red
Here you created a span element inside h1 element but it does not break the flow, basically inline elements have adjusting behaviour, they will not force other elements to get out of their way.
So in plain english, block elements are huge boxes and the ext element starts from the next line and that does not happen with inline elements.
Tushar Singh
Courses Plus Student 8,692 PointsThere's a third element as well "inline-block", now it is your job to figure it out. Is it a block element or an inline?? What is it and why would you use block,inline, inline-block? I would suggest read articles play with these properties and You will master it.