How to: Add a line break between sidebar widgets

How to: Add a line break between sidebar widgets

Widgets are great, that is a sure thing. But sometimes, they can be annoying, for exemple when they don’t look the way you want or need. The most common problem seems to be adding a line break between widgets. Here’s how to do it.

To add a line break between sidebar widgets, simply open your style.css file and append the following code:

.widget{
    margin-bottom:25px;
}

Easy, isn't it? Note that it is possible to add a linre break to a specific widget only. You'll need its css id for that.

19 Responses

Chung Bey Luen

Feb 28 2009 11:35

Thanks for sharing. It’s an easy and useful recipe.

Eyal Sela

Feb 28 2009 12:17

thanks, I really like these short tweaks…

Sarbjit Singh

Mar 01 2009 06:23

Easy and needed as always.

Thank you

Wordpress Themes

Mar 01 2009 07:30

Short and sweet. Gets the job done.

Agent 001

Mar 01 2009 12:04

I am lucky my theme is programed to create a gap between every new widgets. But its nice to know that it can be done easily too. For newbie it will be very helpful.

Web Design Beach

Mar 01 2009 13:37

Nice css tip .. Short and functional …

Spamboy

Mar 02 2009 06:53

Instead of “px” as the unit of measure, using “1em” would more closely simulate a line break, as it would be more compatible with the general font size.

WPCult

Mar 02 2009 09:36

Often times you may need to clear a float a widget may be inheriting.

So you may want to use clear:left;

Odzyskiwanie Danych

Mar 02 2009 11:57

I don’t know about that. I mean it’s a nice tip however there is such thing like too many widgets and I guess you reach that point when you need to use lines to separate one from another…