Button Height and a Broken Box Model

Published March 2, 2010 by CSS Newbies.

When I figured out the workaround for line-heights in form buttons last week, I also discovered an interesting discrepancy (feature?) across all major browsers in terms of buttons and the box model. Check out this article for a more in-depth refresher on the CSS Box Model, but here’s a brief summary:

Let’s say I have a div styled like so:

div {
	height: 30px;
	padding: 10px 0; 

The box model states that the resulting box will take up 30px of vertical space for the div’s contents, plus an additional 10px on the top and bottom for the padding, for a total of 50px vertical space taken up by our div. Read On…

Writing CSS Shorthand

Published April 7, 2008 by CSS Newbies.

"Jeri Rowe" by spcoon.

Writing Cascading Style Sheets saves you time and bandwidth in the long run by removing all of the presentational elements and attributes from your web pages and moving them into a separate document. But sometimes that CSS document itself can get pretty long as well. So what do you do then?

There are lots of things you can do to help – embracing the cascading nature of CSS helps a great deal, as does combining CSS declarations using sequential selectors. But another trick that can really help cut down on the size of your CSS is to use CSS shorthand properties whenever possible. There are six shorthand properties for various areas of your CSS: margins, padding, borders, backgrounds, list-styles, and fonts. I’ll go through each of them below.

The margin shorthand property combines the margin-top, margin-right, margin-bottom, and margin-left properties into one single property. So instead of writing this:

div {
	margin-top: 5px;
	margin-right: 8px;
	margin-bottom: 3px;
	margin-left: 4px; }

You could shorten it all down to this:

div { margin: 5px 8px 3px 4px; }

It’s important to remember to always put your margins in the shorthand property in the following order: top, right, bottom, and left. Basically, just start at the top and work your way around the element clockwise. And if your top/bottom and left/right margins match, you can boil your shorthand down even further:

div { margin: 5px 8px; }

The rule above applies a 5 pixel margin to the top and bottom of your div, and an 8 pixel margin to the left and right sides. If all four of your margins match, you could even just write this:

div { margin: 5px; }

The padding shorthand property works exactly the same way as the margin shorthand. The biggest thing to remember about both of these properties is to start at the top and work your way around clockwise. And if you’re shortening it to two values, the top/bottom value always goes first, followed by the left/right value. Further, if you don’t need to specify a value on any one of the sides, you can just specify a zero (0) size with no unit of measurement.

div { padding: 30px 0; }

The border property allows you to combine the border-width, border-style, and border-color properties into one. The width comes first, followed by the style, and then the color. So instead of writing out all this:

div {
	border-width: 3px;
	border-style: solid;
	border-color: #c00; }

You could boil it down to a single rule, like so:

div { border: 3px solid #c00; }

The background property is fairly powerful, in that it combines five rules into one: background-color, background-image, background-repeat, background-attachment, and background-position (in that order). So instead of writing this verbose mess of code:

div {
	background-color: #fff;
	background-image: url(../images/bg.gif);
	background-repeat: repeat-y;
	background-attachment: fixed;
	background-position: top center; }

We could boil all of that down to this little snippet:

div { background: #fff url(../img/bg.gif) repeat-y fixed top; }

Also note that I skipped the “center” portion of my background-position property: if you specify one background position (i.e. “top”) but neglect to specify a second position value, “center” is the assumed value.

The list-style shorthand property isn’t used all that often, but it can save you a couple of lines of code. It combines the list-style-position property with either of the list-style-type or list-style-image properties – you could probably specify both, but list-style-image would overwrite the list-style-type property with whatever image you selected. So instead of writing this:

ul {
	list-style-type: square;
	list-style-position: inside; }

You could write this:

ul { list-style: square inside; }

Generally speaking, however, I tend to only use this shorthand when I’m looking to remove styling from the list (as when building a navigation bar):

ul { list-style: none; }

The font shorthand property is probably the most powerful of all the shorthand properties. It combines a grand total of six properties into one: font-style, font-variant, font-weight, font-size, line-height (even though it’s not technically a font property), and font-family. So instead of writing out all six of these rules:

p {
	font-style: italic;
	font-variant: small-caps;
	font-weight: bold;
	font-size: small;
	line-height: 1.2em;
	font-family: Helvetica, Arial, sans-serif; }

I can get by with a single declaration:

p { font: italic small-caps bold small/1.2em Helvetica, Arial, sans-serif; }

Of course, most of the time you won’t be specifying all six of those properties at once – I can’t even imagine how difficult it would be to read italicized, bold-faced small caps! But it is very useful for specifying your font-size, line-height, and font-family all in one place. That way, all of your typeface information sits one convenient location.

When to Use Margins and Padding

Published March 17, 2008 by CSS Newbies.

There are two ways in CSS to create space around your elements: margins and padding. In most usage scenarios, they are functionally identical – for example, if you add 20 pixels of either margin or padding to the left side of an element, that element will generally move 20 pixels to the right on the screen. But in truth, they do behave in slightly different ways. So when should you use margins, and when would padding be more appropriate?

Use margins when:

  • You want your spacing to appear outside of the “box” created by a border property. Margins lie outside of borders, so you’d use them if you want your border to stay in one place. This can be useful if you have, for example, a sidebar with a border that you want to move away from your main content area.
  • You don’t want your background color or image to invade your personal space. Background colors and images stop at the border, so if you’d rather keep your backgrounds out of the space you’re making, margins are the property you want.
  • You’d like collapsible space on the top and bottom of your element. Top and bottom margins behave differently than side margins in that if two margins are atop one another, they collapse to the size of the largest margin set. For example, if I set paragraph to have a top margin of 20 pixels and a bottom margin of 15 pixels, I’ll only have 20 pixels of space total between paragraphs (the two margins collapse into one another, and the largest wins out).

Padding, on the other hand, behaves very differently in these scenarios. Thus, you’d want to use padding when:

  • You want all of the space you’re creating to be inside your border. Padding is contained within your borders, so it’s useful for pushing your borders away from the content inside of your element.
  • You need your background color/image to continue on into the space you’re creating. Your background will continue on behind your padding, so only use it if you want your background to peek out.
  • You want your top and bottom space to behave more rigidly. For example, if you set the paragraphs in your document to have a top padding of 20 pixels and a bottom padding of 15 pixels, then any time you had two paragraphs in a row, they’d actually have a total of 35 pixels of space between them.

So as you can see, there are important differences between margins and padding that you should take into consideration when choosing which to use to move elements around the page. However, in those cases where either margins or padding could be used to the same effect, a lot of the decision comes down to personal preference.

For example, I tend to use margins almost exclusively when I’m trying to create space between two elements. In my mind, margins are used for creating space between elements, while padding is used for creating space within elements. Therefore, I use margins to move disparate elements apart, and padding to create a little breathing room within the elements themselves.

However, a case could also be made for using padding for effecting space between elements. From time to time, Internet Explorer 6 will have trouble with margins – there’s something out there known as the doubled-margin float bug that can wreak all sorts of havoc with pages laid out with margins when they’re loaded in our favorite “special” browser. Using padding almost exclusively does create a way around this problem. I personally tend to just use a CSS hack or two to make IE behave itself when we’re in public, but as I said, this can be an effective argument for ubiquitous padding.