CSS Tips: Padding, Margin, & Backgrounds

I’d like to post a series of CSS tips on here for everyone to have access to so that you have the ability to manipulate the content on your pages more effectively. I won’t be going into extreme detail because I would imagine everyone is at different levels when it comes to web editing. I would also think you are primarily focused on getting content out there and not too much on changing design elements. However a basic understanding of some CSS styling techniques will go a long way to empowering you to take control of the content you publish on the sites. I will use a couple of practical examples from existing pages and share a few tools to help you out. As always feel free to ask me questions if you have the desire to do something on the site that you are not quite sure how to accomplish.

Before I get to the actual styling properties, I would just like to note one of the reasons why I am going over these. Anytime you copy and paste content from almost ANY source, there is some baggage that comes along with it that can have adverse effects on the website. One of the biggest problems is when you copy and paste content from word documents. Many styling properties are sometimes brought into the page when you paste, and if you do not remove them, they can screw up the entire page on which they exist. Understanding basic CSS styling will allow you to create the styles you need, without needing to paste in styles from outside sources.

Margins & Padding

I can’t say there is one or two MOST important things to know about CSS. I use many styling properties on a daily basis, but of all of them, padding and margin are near the top of the list. To put it simple, margin refers to the space around an element. Padding refers to the space between the outside of an element to its contents. Without going into specific details, if you attempt to manipulate padding or margin on an element, it may appear to not have any effect. This could be because of MANY reasons in which case you may need to ask for help.

I am going to take an example from the saltlake.usu.edu site that I saw that illustrates this point perfectly. Consider the following image.

heading example

Let’s say we want a heading to have a orange background fading from orange to white that looks like the image. Adding in an image can work but it does have some limitations. On a smartphone in which you can zoom, the text looks crisp zoomed in but the heading looks pixelated the closer you get. If the width of that content area would ever to change, that image would either be cut off, or possibly be not long enough to span across the content area. Our website is currently not flexible width, but it might be someday. A flexible width site adapts its width to the screen size so devices with different widths i.e. tablets, desktops, notebooks, netbooks, smartphones, etc would all display the site effectively at their screen sizes. An image is very limiting in this way, but thank goodness to newer browsers and CSS3 we can completely recreate this effect without much code or work. In the process you will learn about padding, margin and a background trick.

Understanding What We Want

What we want is a heading with a orange faded background. We want that heading to have some space on the inside between the letters and the edge of the orange bar, also known as “padding” and we want some space around the orange bar so stuff doesn’t look too squished, also known as margin. First let’s make the bar so we can get a good idea of how much space we need. Understanding which h tag we would use is beyond the scope of this conversation, but if we are in the middle of a block on content, h3 would be a good guess. So to make a heading with a orange background, we simple need to use the following code.

< h3 style=”background: #edb220;”>Three Easy Steps</h3>

Three Easy Steps

Understanding the Code

Elements are opened and closed with the greater and less than symbols. You open a tag like so: <tagname>. You then close a tag like so: </tagname>. Any CSS tag styling goes in the tag opening anywhere after the name and is indicated by the style property. A tag may have other properties as well, but it may only have one list of style properties. Since I wanted to add a background color, we use the background CSS property in the style of the element I am modifying as shown in the code above.

The format for CSS styling properties are like so: style=”property: value;”

You can chain multiple properties together, as we will see in a moment, within the quotation marks like so: style=”propert1: value; property2: value;”

With that simple code, we are about 1/2 way done with this example. This isn’t exactly what we want, but pretty close. Let’s work on the padding first. Let’s add a bit more space between the letters and the outside of the orange bar. That will make the bar a hair bigger. Also we want to add a bit more space between the left side of the orange bar and the letters. From experience I can say I’ll probably want just a few pixels on the top and bottom, maybe three and then about ten to fifteen pixels on the left. So I will add that in.

Adding in Some Padding

In order to add in the padding we are going to add a padding style to the same heading element with the values listed above. Again I don’t want to get too technical, but there are two ways to list these padding values. You can simple chain together all the different properties with their values like so:

< h3 style=”background: #edb220; padding-top: 3px; padding-bottom: 3px; padding-left: 15px;”>Three Easy Steps</h3>

This works, but as you can see it is already getting a little wordy and even a little hard to read. Thankfully many CSS styling properties can be condensed in a shorter form to make them easier to read and write.  We could list the padding in a more condensed for like so:

< h3 style=”background: #edb220; padding: 3px 0 3px 15px;”>Three Easy Steps</h3>

The way this works is CSS knows that an element has a top, right, bottom, and left. When you call the property padding and list the four values after it, the values refer to the directions in that order: top, right, bottom, left. So saying this – padding: top right bottom left; is the same as listing them one by one.

Three Easy Steps

Now to the Margins

Hopefully you can see the difference in this example and the one above. The space around the letter is just a bit bigger. Now about the space around the orange bar. In the example, the space above the orange bar is substantially larger than the space below it. Currently our space below the orange bar is about right, but I want to add some more to the top. We will do this in the same way we added padding, but we will do it with margin.

< h3 style=”background: #edb220; padding: 3px 0 3px 15px; margin-top: 40px;”>Three Easy Steps</h3>

I am going to guesstimate 40 pixels as a good number for the top margin. This will add 40 pixels between the top of the orange bar to the bottom of the element above it. This buffer space is know as a margin and can also be manipulated on all sides of the element. So our new heading would look like this.

Three Easy Steps

Look at all that margin now. We could have also listed the margin like so: margin: 40px 0 0 0; if we wanted to, but since we are only listing one item, margin-top works just fine. There are some other reasons why only listing margin-top is better, but I’ll go over those at the end of this document. We still need to change the background to fade from orange to transparent. The easiest way to do this is with a great site I use for all CSS gradients. The site is called Ultimate CSS Gradient Generator and it’s awesome. It comes with some built in web 2.0 looking gradients as well. We just need a basic gradient so this will be simple.

First click on an existing gradient with just two colors. Click around till you find one since we’ll only need two. If you can’t find one, just click on the tiny square boxes below the horizontal gradient thing and drag it off of the area to get rid of it until you only have two left. Drag one of the boxes all the way to the left side and then double click it to edit the color. Change the color to EDB220. Drag the other box all the way to the right and change its color to whatever color you want to fade to. Our example image shows white but my page is grey so I will use the grey so the end result will look correct.

After that all that is left is to change the orientation to horizontal in the drop down menu located at the top right. As you can see in that box on the right, all of the CSS code has been generated for it. When you are done just hit the copy button located in the bottom right corner of the CSS box.

css

It really looks more daunting than it is. After you hit the copy button you just need to paste it in place of your existing background property. You code gets a lot bigger, but still manageable because all that gradient stuff is part of the same code. The reason it’s so big is because is because it’s all the code to display properly in ALL browsers. We can probably get rid of some of them, but since it’s all made for us, who cares. Our code now looks like this with the result below it.

< h3 style=”background: #edb220; /* Old browsers */
background: -moz-linear-gradient(left,  #edb220 0%, #e6e6e6 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#edb220), color-stop(100%,#e6e6e6)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  #edb220 0%,#e6e6e6 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  #edb220 0%,#e6e6e6 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  #edb220 0%,#e6e6e6 100%); /* IE10+ */
background: linear-gradient(left,  #edb220 0%,#e6e6e6 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#edb220′, endColorstr=’#e6e6e6′,GradientType=1 ); /* IE6-9 */
padding: 3px 0 3px 15px; margin-top: 40px;”>Three Easy Steps</h3>

Three Easy Steps

And you are done. This heading will now display properly in almost all browsers at all zoom levels. You can also still change the text on the fly without regenerating an image. In addition there is no image for the browser to download so the page loads faster which is great for smartphones. Lastly, it will stretch and condense to the width of the content to it is flexible. All around a better solution than an image.

Some Technical Details

Any styling you do to elements on your pages will override any styling done on a global scale from the main style sheet. This style sheet does lots of things like makes headings blue, controls font sizes, etc. It is obvious that your styling will override global styling, but sometimes it’s not what you want. Consider our margin in the example. There is already a default amount of space below the heading.

Three Easy Steps

If you see now how this looks, it’s not what we want. What we have done by listing the margin as margin: 40px 0 0 0 is override the global margin below the heading and made it 0. Sometimes it’s safer to list only the properties we want to change so as not to override global settings. Either way if you find yourself overriding something by accident, just change it to list only the properties that you want to change.

You can shorten your code even more as well. If you know you want a set amount of margin or padding on opposite sides or ALL sides you can list it shorter. Let’s say we want to have 10px of margin on the top and 10px of margin on the bottom but no margin on the left or right. We could say: margin: 10px 0; The first number lists top and bottom and the second number lists left and right. If we want the same amount on all sides we only list a single number. The images on this page have a padding of 5px all around and a border. The padding is the distance between the border and the image. I listed the padding like so: padding: 5px.

Advertisements

One thought on “CSS Tips: Padding, Margin, & Backgrounds

  1. […] you can read about in another post about CSS, you can use css styles directly on the html page to change the look of these elements. […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: