Target Top Margin of Paragraphs on My Page

[pittles78]

Hi,

On the page http://superluxefibers.com/services/ I want to bring the paragraphs closer to the images. I think that means a smaller margin.

Not sure what the difference is between margin and padding btw.

Can I assign a class to target just those

‘s on that page.

Best,
Jon

[TheDoc]

In your particular case, you have a bottom margin on the image and a bottom padding on the paragraph.

You’ll want to do two things:

1. Remove the bottom margin from the image
2. Change the padding-bottom on the

   to margin-bottom.

To accomplish #1, find this in your CSS file and remove the margin:

.row .col img {
    margin-bottom: 15px;
    max-width: 100%;
    width: auto;
    height: auto;
}

Think of padding as “inside” the element and margin as “outside”. The padding pushes the boundaries of an element (makes it bigger). So if you had a border around the element, or perhaps a background color, additional padding will make that element appear bigger.

Margin, on the other hand, is on the outside of padding/border and pushes other elements further away.

Here’s a really simplified example: http://codepen.io/ggilmore/pen/a3600b7fe3f3fcb2e00191f4c1cfd4d6

[pittles78]

Great explanation of padding vs. margin thank you.

Ok, so I took care of the bottom margin, but in the html of my wordpress page I don’t see the

tag on my image. I do see it when I look at the code in Firebug.

Is WordPress placing

<

p> tags on all images? How can I make that not happen on this page?

[Martin Duran]

Yes, WordPress encloses images within p tags. In your example, the paragraph tag directly follows the h3 tags, and so there is a selector, one that is supports all the way down to ie7, for such an instance.

Add the following to your css, and notice that it removes the padding bellow your images:

h3 + P {
  padding: 0
}

[pittles78]

Worked like a charm! Thanks again Martin.

[Martin Duran]

pittles,

Be cautious, however, as that selector will remove the padding from any paragraph tag that follows an h3 tag.

[Author]

Posts