I’m building a new website and on every page there is a headline — 2-4 lines each — which is “staggered”. (not left, centered, or right) Each line will be at a different left position depending how it looks visually.
Inline styling makes more sense to me because each “left-position style” will be unique.
My question is this:
Should I use a span tag with margin-left, padding-left, text-indent or ??
I don’t see where to upload an image for you to see on here, but I’m hoping this makes sense!
Certainly you could re-position h tags to achieve this effect but there is nothing ‘pure’ css to make items adjust like that of their own accord at present. CSS ‘regions’ are on the cards but they are, AFAIK, merely being suggested at this time.
If the ‘headlines’ aren’t going to change then the simplest solution is to just do one large image.
If they are going to be variable then re-positioning them would seem to be the option and I would do this with a single div with multiple h tags and adjust the left margin on those.
“I didn’t want to set up a css style for each line indent, on each page. I think that would incur more code than inline styling.”
It’s the same amount of work, it’s just a question of where the styling is listed..in the page on in the stylesheet.
In fact, inline styling might actually be more work as you can’t re-use a previous style with inline.
As for targeting then the ‘nth-of-type’ I showed in the fiddle is one option.