Adding space between widgets

You dont need to add empty widgets. You can add to the before widget and after widget a div and just css the div. e.g. see: https://www.cogmios.nl/index.php?s=widgets

He doesn’t even need to do that.

Add these to the CSS:

.sidebar ul li {
padding-bottom: 20px !important;
}
.sidebar ul li ul li{
padding: 0px !important;
}

Adjust the 20px to whatever size you want. And eliminate the empty widgets you were using.

Also, when playing with CSS, I highly recommend using Firefox and the Web Developer Addon. It will let you change the CSS contents of any page on the fly, and see what the results look like immediately. No need to change and reload over and over, just mess with it until you get it, and then copy and paste your results. Much simpler.

Why does everbody do this !important thingy ?:)

Once it began – everybody is at it.
Its a complete misuse of the CSS.
IMHO.
Led by Kubrick of course. ??

In this particular case, !important happened to be required. Try it without it, no worky. Okay, so I could have dived further into the CSS and figure out why, but you know, screw that. ??

For me to accomplish this I changed the stye.css.

Original

#sidebar ul li {
	list-style-type: none;
	list-style-image: none;
	margin-bottom: 15px;
	}

New

#sidebar ul li {
	list-style-type: none;
	list-style-image: none;
	padding-bottom: 100px;
	margin-bottom: 15px;
	}

I am not an expert on css but so far have seen no ill effects.

Thanks everyone, Otto your suggestion worked so thanks a lot. I’ve now got the widgets spaced out but there are still 2 spacing issues I am unsure of.

1. The 1st widget is over the header logo, how do I bring that down and make it start at a more neater place?

2. The widget containing “Free workshop” is very spaced out indeed, how do I bring the boxes up closer to the writing.

Site again is https://www.urbanspirit.co.uk