Is margin/padding acceptable as inline CSS? [closed]

Question

It's best practise to have all the styling in an external CSS file to take advantage of caching, separation of markup and design, better overview etc.

However, I usually ran into the problem that elements are supposed to look the same, i.e. have the same class(es), but need to differ in position, e.g. require a different margin or padding due to composition differences.

I thought of three options:

Option 1: Split appearance styles from position styles (margin/padding), have them in separate classes and combine them as needed.

.myClass { ...; }
.myClass.top { margin-top: 20px; }
.myClass.inside { margin: 10px 0px; }
.myClass.bottom { margin-bottom: 20px; }

Option 2: Duplicate classes, rename them accordingly and keep every difference in its own class.

.myClassTop { ...; margin-top: 20px; }
.myClass { ...; margin: 10px 0px; }
.myClassBottom { ...; margin-bottom: 20px; }

Option 3: Use inline style to declare different margin/padding.

<div class="myClass" style="margin-top: 20px;">
<div class="myClass">
<div class="myClass" style="margin-bottom: 20px;">

having

.myClass { ...; margin: 10px 0px; }

My common sense tells me to use Option 1 and cascade differences depending on the parent/child structure. But this usually ends up pretty confusing, especially for other developers reading the CSS. So I tried Option 3 (having just a few external margin/padding) and that seems to work pretty well.

I still feel bad about it in some strange way. There are so many people telling not use inline style. Usually I'd say "whatever works best", but recently I realized that inline margin/padding might have impact on the rendering process of the website, causing "dancing blocks". I'm not sure if this effect is really caused by the processing order of styles or rather some other nasty things going on there, I guess.

Any advise?

Answer 1

My personal preference is to have "spacer classes", so to speak. For example:

.default-row-spacer{
    margin-bottom:10px;
}
.default-spacer{
    margin-right:10px;
}
.large-row-spacer{
    margin-bottom:20px;
}

Then I use them like this:

<div class="panel default-spacer default-row-spacer">
    <div class="content default-row-spacer">
    </div>
    <div class="content default-row-spacer">
    </div>
</div>
<div class="right-panel default-row-spacer">
</div>

This allows me to later change all of the site's margins later on, maintaining the same look and feel throughout my website.