Join Morten Rand-Hendriksen for an in-depth discussion in this video Sidebar: Images are inline elements, part of Making Sense of the CSS Box Model.
- At this point, it's necessary to take a quick sidebar … and address images. … As I've mentioned several times earlier, … in HTML images are considered inline elements … due to their original definition as small figures … or graphics to extenuate text. … To see what I mean think about how emoji are added … to a sentence. … You have words, then the emoji appears … and then you have more words. … The emoji appear inline … and by default the image acts in the same way. … You have the words, then your emoji … then an image and all of them appear inline. … This has some specific consequences … that need to be considered when applying … the box model to images. … If you add an image to a HTML document … within another element, … it will appear inline with the rest of the content. … This however is not how we normally want to display images. … In fact, I can find very few instances … where default display setting … for the image element makes any sense. … The way people usually discover this rather odd choice …
- Designing with boxes
- The origin of the box in typography
- What is the CSS box model?
- Changing the contents within the box
- Floating and clearing content
- Using the clearfix
- Working with Float, Flex, and Grid
- CSS shapes