CSS - background margins

CSS table cell margins with coloured BG

[DiAMOndDavE]

Folks,

I have been to W3Schools to answer this one with no luck. I have a table cell that I want coloured with a pale yellow background. The thing is I want a 10 pixel margin (all 4 sides) with white space. In other words, I would like the yellow BG 'indented' by 10px from all sides. Padding the TD doesn't work. Can I do this with CSS using "margin-top -10px" or something like that? (You can tell I am at an early stage of my CSS learning so sorry if this is too basic!)

Regards
DiAMOndDavE

[Thors Hammer]

Give these a try, you might find what you need here;

[w3schools.com...]
[w3schools.com...]

My first thought was to do something with a 'tile' of the color that would be an image, that you could then use the padding command to effect. But maybe the above links will offer a way to do it other than that. I am sure others that are versed in this area will be around soon to offer other opinions.

Good luck. :)

hope it helps

Thor

[papabaer]

Hello DiAMOndDavE,

Don't apologise for asking a "too basic" question. In reality, it is not. What you are trying to accomplish is representative of the issues that often arise when developers first venture into the realm of CSS.

Basically, you are still in "table layout mode" as far as "mindset" goes. And that's okay, it's to be expected; you learn as you go along and find soltutions to various presentational issues. Then, one day, CSS will all make perfect sense and from that point on, everything will be much, much easier.

Styling tables can be a bit intimidating even for those developers moderately advanced in the world of CSS - table styles have a few important differences from the older HTML styling techniques. It's not difficult... just different is certain aspects.

For a good reference consult the W3C: [w3.org...]

But now back to your issue: You would like to have a pale yellow background with a white 10 px padding/border/spacing/blankspace or any combination thereof... Assuming ;) you will be placing something INSIDE the <td>, why not style the content to achieve your goal?

CSS is ALL about perspective and approach: Why not have a "white background" with a paragraph, div or whatever HTML element you intended to place within the table cell, styled using (if paragraph) p.ltyellow10 {background:#ffc; border:10px solid #fff; padding:3px;margin:0;}? The padding was added to give some "breathing room" for your text, the margin:0; to remove the paragraph element's default "before and after" spacing.

Then apply the style:
<td><p class="ltyellow10">My 10px-white-border-pale-yellow-background-paragraph-in-a-table-cell!</p></td> The result would give you the 10px whitespace you are looking for... and, well, you know the rest. You can use various combinations to achieve the "presentational" styling you are looking for. Experiment, have fun.

There are many methods to achieve styling in most cases. It's just a matter of perspective... ;)

<revised>
eys blurred,
mind not much better...
need zzzzz.....
</revised>

- papabaer

[DiAMOndDavE]

papabaer,
As they say down here in Australia...you are a few cans short of a 6-pack. Get some coffee or sleep (or both!). In the meantime, thank you for the excellent advice. Thanks also to Thor.
Regards
DiAMOndDavE