Blog Posts

CSS Box Model with WordPress

23 Oct CSS Box Model with WordPress

With an Intro to HTML & CSS we took a look at the very beginnings of the box model property: one of the most fundamental and important things to understand to edit and build sites. Now lets delve a little deeper in understanding what the box model is and how to manipulate it using both WordPress and CSS/HTML.

You’ll recall there are two types of elements: block and inline. For an inline element, the box model doesn’t apply. This is because it’s as if there is no space around it. If there were, it would (by default) appear on its own line and occupy space.

All block elements (unless other specified with CSS) appear on their own line, and occupy space within the site. Take, for example, a <p> tag (which all content in WordPress defaults to being wrapped in). The <p> tag will always appear on its own line, with space above it and space below it. This space is called a margin.

If you think of all elements being wrapped in boxes, the margin is how far one box is away from the next. You can also add spacing within each box, which is called padding. When all elements have the same background color, and no border, there is no noticeable difference between margin and padding to the eye. But, it’s important to understand the difference.

If you want to push elements away from each other use margin. If you want to add space within an element itself use padding. Both margin and padding can take one, two, three, or four values. Any number less than four is setting all four. Like so:

#header {margin: 0;} this sets all margins to 0: top, bottom, left and right.
#header {margin: 0 10px;} this sets the top and bottom margin to 0, but the left and right to 10px
#header {margin: 0 10px 5px;} this sets the top margin to 0, the bottom margin to 5px and the left and right to 10px each
#header {margin: 1px 2px 3px 4px;} this sets the top margin to 1px, the right margin to 2px, the bottom margin to 3px, and the left margin to 4px.

The same can be done with padding (and borders)

Within WordPress most of the structure logic will be handled from the theme. There will be a bunch of <div> elements (because they occupy space) within various theme files, and they will be styled using the style.css from appearance > editor.

For now, we’ll just look at how to add margins to elements from within the editor. Note that often times WordPress themes will come with shortcodes, which are just snippets of text that output HTML. This can be good for adding columns, or other elements.

Each element can have a style attribute, which allows CSS to be written inline. This is usually something we try to stay away from, but can often be a good way to add style to one particular element (instead of adding a class to it, and styling that class). To make inline edits within WordPress click the “text” tab at the top.

If you’ve simply typed a bunch of text, there will be no HTML. This is all rendered when a couple functions are called, and all text will be wrapped in <p> tags. To change this, simply add your <p> tags manually and style them. Lets say I want to set a paragraph away from the rest (maybe it’s a quote), I could very simply do <p style=”margin: 20px;”> to push it away from all other content.

This is a very quick way to set content apart from other content. Understanding when to use padding and margin can play a key role in the structure of your site. There are a few more things that play into the box model property, but we’ll take a look at those later.

No Comments

Leave a Reply