Many people ask me why I put nearly every image in a wrapper in my tutorials.
The answer is that many designs call for images to have accent styles of some kind. Accent styles are often added with pseudo-elements. And…
- You can’t add pseudo elements to
img
tags. - You can’t programmatically add wrappers after the fact.
Since I don’t have a crystal ball, putting every image in a wrapper is the safest workflow. If I need to do something with pseudo-elements, the wrapper makes that possible. The wrapper also gives me an extra box, which adds more design flexibility in other ways (padding, positioning, borders, and more).
A wrapper on images opens many doors and costs basically nothing. It’s a nearly-free insurance policy.