Minimizing use of explicit padding style attributes

Question

I am finding I'm writing a lot of code that looks like this:

           <div id="leftCol">

                <div style="padding-top:10px">
                    <asp:Image ID="imgRazor1" ImageUrl="http://www.example.com/dynimg.aspx?imageKey=XXX" runat="server" />
                </div>

                   <div style="padding-top:10px">
                    <asp:Image ID="imgRazor2" ImageUrl="http://www.example.com/dynimg.aspx?imageKey=XXX_CART" runat="server" />
                </div>

                <div style="padding-top:20px; padding-bottom:15px">
                    <asp:Image ID="Image3" ImageUrl="~/images/announcements/announcement1.jpg" runat="server" />
                    <div style="font-size:x-small">(from example.com)</div>
                </div>
            </div>

Thats to say I am putting a lot of explicit padding or margins.

I'm wondering what a better approach to this is without ending up with class names like these:

.mediumPadding {
    padding-top:10px;
}

.smallPadding {
    padding-top:5px;
}

.padding15 {
    padding: 15px
}

When I'm coding actual CONTENT like this as opposed to more generic overall LAYOUT I tend to find that specific padding sizes are more appropriate. I'll find myself changing from 8px to 11px and then back to 9px. It must be the designer in me, but I dont really like the habit that I'm forming.

I dont see myself being able to revisit a global rule that says 'medium padding' is 9px and changing it to 11px and expecting satisfactory results. It may make some pages look nicer and make ruin others.

What do other people do to solve this problem? I want benefits of css, but I need fine control.

Answer 1

You can have a general rule and the override it with id rules in specific cases if needed:

#leftCol > div { /* general rule */ }
#img1 { /* custom override 1 */ }
#img2 { /* custom override 2 */ }

Answer 2

Your code suffers from a serious case of div-itis. I would first start by using proper tags for headers, paragraphs, etc. Once you have a properly marked-up document, you can add classes for common elements, then style those classes as necessary. You'll find that certain types of elements share a style no matter where they are, so you can minimize the amount of inline styling.

Your classes should reflect an attribute of the element (e.g. "caption"). In general, classes should not refer to a specific design implementation. HTML is the 'what', CSS is the 'how'. When you use CSS classes that represent design specifics, you're injecting the how into your HTML.

(Yes, sometimes these rules need to be broken. But those are exceptions.)

Answer 3

Often the first and the last element in a container requires special treatment. It looks like this is the case in your example.

The first-child and last-child selectors aren't very reliable across browsers yet (mostly because of IE6), so you can either add classes manually for the first and last element or use a bit of javascript to help you - Offspring does this nicely.

Answer 4

Each of those divs will have a purpose. A reason that they're been treated differently. Find that and give those divs a name that reflects the content.

<div id="leftCol">
  <div class="navigation"></div>
  <div class="calendar"></div>
</div>

Then you should put your padding into the style sheet. If you're reverting to inline style for design elements then you're not thinking the semantics through properly. Once you have your classes in there, you can edit your style sheet quickly and painlessly using Web Developer etc.

Cheers,
Steve