XF 2.0 How do I change spacing on a single widget block on a widget page?

Bonsai Coder

Active member
I have a custom widget page node as a home page. Some of the widgets are in blocks, some are not. How do I identify a single widget block to increase space between it and its neighbor? For example:

screenshot-www.bonsainut.com-2018-01-25-08-26-22.webp

I am specifically looking to add space on top of, or on the bottom of, a single block via CSS customization. I just don't know how to identify the widget...
 
Most widgets will contain a number of data attributes similar to this:
HTML:
<div class="block" data-widget-id="7" data-widget-key="forum_overview_forum_statistics" data-widget-definition="forum_statistics">
You can use these (or any attributes) to select elements in CSS.

Here's a few examples:

https://css-tricks.com/almanac/selectors/a/attribute/

Given our example above, we could add some extra top margin to our forum statistics widget using:
Less:
.block[data-widget-id="7"]
{
    margin-top: 5px;
}
 
Back
Top Bottom