Hi there, I used Firebug (a handy tool for working with CSS) to determine that the spacing between your images there is being applied the margin on the “aligncenter” class:
.aligncenter {
clear: both;
display: block;
margin: 0.8075em auto;
}
Each widget area has a unique ID, which allows you to target elements within the widget using CSS code.
It looks like you’ve used a separate widget for each image. If you look in the browser’s source code, you’ll see this bit at the start of the code for the first social-media widget (Twitter):
aside id="widget_sp_image-6"
That’s the unique ID for the Twitter widget. The IDs for the rest of the social-media widgets follow the same format, numbered consecutively through widget_sp_image-10 for Bloglovin.
You can now target the images within these widgets with some CSS code:
#widget_sp_image-6 .aligncenter, #widget_sp_image-7 .aligncenter, #widget_sp_image-8 .aligncenter, #widget_sp_image-9 .aligncenter, #widget_sp_image-10 .aligncenter {
margin: 0 auto;
}
This removes the top and bottom margin being applied by the original class “aligncenter.”
An easy way to add custom CSS like this is to activate the Custom CSS module in your Jetpack plugin. This way, your CSS won’t be overwritten when you update the theme.
