Скачать или смотреть How to Use Padding and Margin in a Widget Style with the Thesis Widget Styles Plugin

http://www.thesistoolbox.com

When styling widgets with the Thesis Widget Styles Plugin, it is useful to understand how padding and margin work. We begin here with an explanation of how they work and then go on to show how to use them in styling widgets (refer to video 1 of this series for the introduction on using this plugin).

Understanding How Padding and Margin Work

The best way to understand padding and margin is to think of 2 containers and some contents. You've got a parent container, a child container and contents. In this case, the parent container is represented by the outside line you see here. The Child container is the second line with the purple and Contents is this rose colored section.

By default, the way the web works is that if there are no instructions to do otherwise, contents automatically expand to fill their container and those containers automatically expand to fill their containers.

So in our example here, without any instructions at all rather than seeing 3 different layers, all you see here is the size of the contents because, as we just said, the contents automatically expand to fill the container which in this case is the child container. The child container is automatically expanded to fill the parent container and so the only thing that's really visible is the contents.

Now we add in padding and margin. Margins move the child container away from its parent container. So if this is the child container and we add a margin, the child container moves away from the edges of its parent container.

Conversely, padding moves the contents away from the edges of its container. So again, if you apply padding to the child container, it moves the contents inward or away from its edges. So in order to get this effect where the parent container is larger than the child container and the child container is larger than its contents, you add padding and margin to the child container. Child container moves its container away from its parent and padding moves its content away from its edge. If it helps you can think of margin as pressing outward and padding as pressing inward.

Use Padding and Margin in a Thesis Widget

So if we were to add margin to the overall widget, it would move the widget away from its container which, in this case, is the sidebar. If we add padding to the overall widget, it moves the contents of that overall widget away from its edges. And that's what we need to do in this case because right now the edge of our container is here and here and there and there. And we want to move the container's contents away from its edges.

Let's return to the Thesis Widget Styles plugin and go to our Customization Options for style 1 which is applied to this widget. Select Customize Widget Padding and hit save. Now we've got options for adding overall padding.

We can do this one of two ways. We can either style all of the sides the same or we can style them all differently or we can do a combination. For example, let's add 20 pixels here in the Widget Typical Heading Padding and then hit save. Go back to our page with the widget style and refresh it. You can see that the padding has pushed everything away from the edge.

The reason the heading is pushed further away than 20 pixels is that the default heading settings have some margin at the top and the bottom. Let's review that in Firefox so you can see exactly what that looks like. This is our heading here. We'll inspect that element and we can see that the heading has this bright yellow above and below, which is where the padding is. So if you want the padding to be even on all sides, you would get rid of the top padding.

It's actually not going to work exactly as described for another reason but I'm still going to show you it so you understand how it works. Go back to the Thesis Widget Styles plugin and to the Overall Padding. Put a zero in for the top padding. Now, the only thing left on top is the margin. Hit save and then return to our page and refresh this.

You would have expected that margin to still show on top of the heading text but the problem is that when 2 margins meet each other vertically they collapse. And right now, the margin for the overall widget is specified as 0.

The margin at the top of the column heading, about 20 pixels, and the margin at the top of the container, which is 0, meet and collapse down to 0. So the margin no longer pushes the container up. However, if we add 1 pixel of padding then the margin for the heading and the margin for the container are no longer touching each other and thus will not collapse.