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

[Bonsai Coder]

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:



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...

 

[Chris D]

Most widgets will contain a number of data attributes similar to this:

<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:

.block[data-widget-id="7"]
{
    margin-top: 5px;
}

 

[Bonsai Coder]

Thank you that's all I needed! (I also appreciate the link to css-tricks)