Breaking News
Home » Digital » The Internet » Coding and Customization » How To Modify The Default WordPress Image Styling And Text Wrapping Around Images
CSS Coding Tutorial

How To Modify The Default WordPress Image Styling And Text Wrapping Around Images

Current WordPress versions have default CSS classes defined for images, including alignment. This means you are able to select having the images inserted within posts and pages to be aligned to the left, right or center of a paragraph. The text will then wrap around the image.

While this ability is a wonderful tool to allow beginner (and advanced) WordPress users to have a beautiful look right out-of-the-box, it is not perfect.

(Hippies' Note: If you enjoy reading our articles, you'll love our newsletter. Receive updates directly to your inbox. Subscribe now!)

As you can see in the image below (it’s circled in red) the text is overlapping the image showing the ‘Theme Functions’.

WordPress Image Alignment Error

We need to fix this error by adding more margin below the image with custom CSS. Thankfully this is a very easy fix.

Jump to Final Code


The WordPress Codex informs us of the ‘Important Theme Code’ necessary to adjust the image styles. The line dealing with the error we are seeing is highlighted as the image in the sample was aligned left.

Quick Tutorial: CSS Margin

A CSS margin is the space around an element, in this case the image.The image is already floating to the left with text wrapping around it. In our case, the problem lies in the amount of margin at the bottom of the image.

CSS Margin

There are two ways to specify the margin within CSS.

Option 1: List each individual side of the margin.

Option 2: Use the shorthand property.

In this example we are specifying both the top and bottom margin with the first value (50px). The second value (25px) represents the left and right margin.

In this example we are specifying each individual side of the margin, but in a single line of code. The values (in order) represent the top, right, bottom and left margins. When remembering the order for this shorthand always start at the top and work your way around in a clockwise direction.

How Much Do I Adjust The Margin?

You could adjust the code and then refresh the page you are working with, but this is time consuming and you are basically guessing. Instead, download FireBug (Firebug Lite for Google Chrome | Firebug Add-on for Firefox) to make your web development tasks easier.

To open Firebug you’ll hold down the following combination of keys; Control, Shift and the letter C. (Ctrl + Sht + C) It will open in the bottom of your web browser.

Select the element you are working on (in this example the ‘Theme Functions’ image).

Using FireBug to Determine Correct Margins

If the highlighter is not open automatically you can select the magnifying glass in the lower left corner (see image below) and then use your mouse to hover over the element you will be working on (see image above). Click when you are hovering over the correct element.

Open Firebug to Inspect the Image Element

The larger red circle on the image above shows the area we will be using to find out the correct number for the bottom margin. It is currently only 3px. By clicking on that number you can use your up and down arrow keys to raise and lower the number to see what will look best. In our example 10px was ideal, but we played with a margin as high as 30 px just to see how it looked. Now we now the number to change the margin in our custom CSS.

Adjusting Margin with Firebug

Final Code Snippet

Example: The Digital Hippies

The following code is what we used to fix the image styling error we used in this example. Simply paste it into your CSS file (hopefully a custom CSS box is available with your theme). You’ll notice we used the option to replace the individual margin for the bottom margin. The other margins did not need to be changed.

CSS Problem Fixed!

And here is an image of the problem corrected. You’ll see the bottom spacing is now more appropriate for keeping the text was overlapping it.

Image CSS Bottom Margin Fixed

Subscribe to our mailing list

I'm interested in...

About Brianne

Born and raised in Orange County, California, I am definitely a "summer" girl at heart. Today I am a full-time mother to a rambunctious two-year old living in a RV. Together Branndon and I are learning how to become financial and location independent.


  1. I never seem to know when to adjust the margin or the padding, normally I have always gone for padding. How do you know which to use as they both do the same don’t they?

    Thank you

    • Brianne

      Hi Steve, I used to be confused as well and still have to ask Branndon every now and then. 😉

      Both margins and paddings will add space, but there are certain times you will want one over the other. The margin is on the outside, while the padding is on the inside is one of the easiest ways I remember it. Take another look at the diagram in the post to see this visually.

      Think of a box, like one of the widget areas in the sidebar for example. There is a border on many of these. If you wanted to separate the block further from the other blocks or content area, then you would adjust the margin (as these elements are outside the border of the box). If you wanted to move the content inside the box away from the edges of the border, then you will need to adjust the padding. Padding keeps the content (like text and images) from actually touching the border as normally you want to have some white space for readability.

      Here are a couple extra things to keep in mind:

      • Background colors: Use padding if you want the color to continue into the new space you are creating. Margins are outside the space and have no background color, they are transparent.
      • Negative Values: Paddings cannot have a negative value, while margins can (ex: margin:-10px). Smashing Magazine has a great article on this.

      I’ll ask Branndon to comment if he has any extra advice.

      Hope that helps!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

CommentLuv badge