4 Ways to Add Space Between Image & Bullet Point Lists Using CSS

This tutorial shows beginners how to add a margin between an image and unordered/ordered list.

If you add a list and wrap it around your image, sometimes the bullet points display over the edge of the image or hard up against the image. This post provides 3 solutions to fix these type of problems.

Here’s the before & after image you can click to enlarge:

There’s severals methods you can use to add the space, each using CSS added to the end of your child themes style.css file before the start of your Media Queries.

Here’s the CSS for all 4 methods: