Caption height, kill extra line

[gunfacts]

Having trouble finding the correct CSS to kill what appears to be an extra line under image captions.

 

[User]

@gunfacts

Is it possible to share a site URL with us?

Then we can see what’s happening.

You may use the PRIVATE REPLY below if preferred.

Regards!

[gunfacts]

Sorry. I always forget that.

Pondering Permits

Scroll down (or search for “click to enlarge”) and you will see the stack of images in the graphic example above.

[User]

@gunfacts

I think what you are seeing is the difference between the images which have a CAPTION and those which do not.

You can see that on the image below, the Captioned image has 4 colored boxes, Blue Image, padding, border and margin.

If you mouse click on any of these bands, it will show on the left, the extent of the related padding, border or margin.

However, if you choose to inspect a plain image (no Caption) the results will be similar but simpler.

If you want to change the vertical/ horizontal spacings of the images, you can change the padding or margin bottom to suit.

Personally, when I set them (and also UL, OL and videos etc.) individually, I use margin-bottom: 15px;  which matches the text paragraph spacing.

Or am I misunderstanding what you mean, as I see nothing wrong or to improve…..?

Regards!

[gunfacts]

Thanks, but I don’t think that is the case.

When I inspect the graphic, the list of paddings are all zero. In the screen grab below (after I hovered over the image and the other frames around it) the last frame shows that we are still only on the image.

 

However, when I clink in the inspector on the caption (“

click to enlarge

“), it shows three bands just around the caption, and only on the caption and below it.

[User]

@gunfacts

Yes, the blue, green and brown are all different extents of the image, the padding and the margin.

All is normal from what I can see.

What “extra line” do you want to “kill”?

I don’t understand your request now, for all seems correct and normal.

FYI, this is what I see when I inspect the asset.

Regards!

 

[gunfacts]

Thanks.

The end goal is to remove all the excess space under the captions. Even just killing the brown margin would be a big improvement. I don’t know what CSS element to address. Which one do you think is causing this?

I’ll note that is I uncheck the padding assigned to wp-caption-text, for the caption and not the image, which is set by Weaver to 1em, then some of the excess disappears, but not enough. The margin seems to be a contributor.

That said, if you look at the first image I provided in the previous post, the one where I’m inspecting the image itself, there is no vertical padding in the “computed” references and only a single brown band. Here is perhaps a better view where we are inspecting the caption, not the image, and where the margin band is displayed.

[User]

@gunfacts

The following will remove the space as it separates out the Caption from the image and centers it on the line below.

It is for 3 captioned images over 2 non-captioned images. Images sizes and URLs as you need.

 <p style="margin-bottom: 0px;"><img class="aligncenter" style="margin-bottom: 0px;" src="https://-image URL-here" width="158" height="100" /></p>
<p style="text-align: center; margin-bottom: 0px; line-height: 95%;">Required Caption</p>
<p style="margin-bottom: 0px;"><img class="aligncenter" style="margin-bottom: 0px;" src="https://-image URL-here" width="158" height="100" /></p>
<p style="text-align: center; margin-bottom: 0px; line-height: 95%;">Required Caption</p>
<p style="margin-bottom: 0px;"><img class="aligncenter" style="margin-bottom: 0px;" src="https://-image URL-here" width="158" height="100" /></p>
<p style="text-align: center; margin-bottom: 0px; line-height: 95%;">Required Caption</p>
<p style="margin-bottom: 0px;"><img class="aligncenter" style="margin-bottom: 0px;" src="https://-image URL-here" width="158" height="100" /></p>
<p style="margin-bottom: 0px;"><img class="aligncenter" style="margin-bottom: 0px;" src="https://-image URL-here" width="158" height="100" /></p> 

If you wrap your WP captioned image in a DIV, you can also move it close to the image:

<div style="line-height: 70%;">[caption etc.......].... imager etc.... [/caption]</div>

Regards!

[scrambler]

The rule below in the theme global custom CSS rule box will remove the bottom padding of the caption

.wp-caption-text {padding-bottom:0 !important;}

 

[gunfacts]

Thanks, Scrambler. I did as you suggested, but it made no difference.

When I inspect the caption, there appears to be a 16.200 padding around the caption, except for the top. When in the inspector I change that to zero on the bottom, most of the problem goes away. But the wp-caption-text does not impact it.

 

[scrambler]

I do not see the rule on your site.

If you removed it, put it back so I can check what is going on, as it works when I put it in.

If you left it, then your CSS file is probably broken because of a syntax error. Run you CSS through an online validation tool, and if you can’t figure it out, paste the content of the whole CSS box here so we can check it out

[gunfacts]

I have put it back, but in the Weaver Xtreme Plus Per Post Options CSS rules, just to avoid possibly messing up other pages (we did text the global CSS option before).

If the per-page mode is not good enough, I’ll add it back to global.

[gunfacts]

Ahhh! Now it is working in the per-post area.

Any other help in tightening up the gap would be appreciated as there is still a lot of white space.

[scrambler]

Below are all the rules you can use,

td {padding-top:0;padding-bottom:0;}
.wp-caption-text {padding-bottom:0 !important;}
.wp-caption {margin-bottom:0 !important;margin-top:0 !important;}

but I noticed you also have an empty paragraph tag at the beginning of the table cell contents, and that cause quite a bit of space.

This is usually a carriage return in the content that WordPress converts into a paragraph

If you cant find it, you could add the rule below to remove the paragraph bottom margin in the cells

td p {margin-bottom:0 !important;}

 

[Author]

Posts