Photo caption padding

A link would be helpful, chappie.

Best I can do:

https://i1008.photobucket.com/albums/af208/3785/public/caption.png

The text caption is too close to the image (imho).

.wp-caption img {margin-bottom: 1em;}

Should do the trick. Lower it to .9 or .7 or whatever… if it’s too big. If you only want this on pages, not on posts, category pages, search results, etc… use .page .wp-caption img as selector.

Eureka! Thanks again, acub.

Some of my ineptitude stems from not knowing the name of the element I want to target. Can I find a full list somewhere?

PS. Feature request for Nico: would it be possible to make the Custom CSS dropdown pane pop out into a larger window? Failing that, could the button be moved to the top of the Customizit menu and push the other buttons out of sight when the pane is extended downwards? Or is that all in the hands of the WP gods?

I personally use right-click > Inspect Element in Chrome. But I hear both Firefox and Safari have some neat element inspection tools, too.

Just sail up and down the DOM and find ids or classes to narrow down or widen up your selector, to suit your needs. Remember ids are strong and classes are weak.

An example: this html

<div id="one" class="one">
	<div class="two">
		<div class="three">some text
		</div>
	</div>
</div>

and this CSS

#one .three {
	color: red;
}
.one .two .three {
	color: blue;
}

will display “some text” in red color, as the #one .three selector is more powerful than .one .two .three. However, if you add the following rule:

#one .two .three {
	color: black;
}

the text will become black. It has 1 id + 2 classes, which takes precedence over 1 id + 1 class.

Much more about CSS selectors here.