How do I add padding? (html)

I;m not familiar with Tumblr. You normally control padding around an HTML element with CSS. Does Tumblr give you the ability to customize a CSS file?

Yes you can add css in a “style” section AFAIK.

They you need to add CSS padding to the element in question. You’ll need some way to specify which element you want the padding to affect. If the element has and ID, you acan style directly specifying that ID. So if it is something like <img src=“this.jpg” id=header” /> you can put 15 pixels of padding on the left of it by a CSS statement like

#header {padding-left: 15px;}

Be a bit more careful if the element you want to style is a class, because it can be used in mutliple places on a page, and you may want the padding affecting only one such place. In that instance, or in instances where your element has no style nor class, it is best to style by climbing up the hierarchy to the containing block-level element that does have and ID. You might end up with something like

table#header tr td img {padding-left: 15px;}

When doing this, be careful to ensure your style applies only to the element you want to change. The CSS above would touch every image within the TABLE with the ID, Header.

Look up CSS padding shorthand if you want to apply padding of different dimensions all around an element.

oh alright that makes sense in one way or another. going to test it out. thank you very much.

Have fun. Cut and try is the best way to learn. If you get stuck, post a URL and what you are trying to acomplish and I can be more specific on how to proceed.

would I say
{padding-left: 15px;}
{padding-right: 15px;}
{padding-top: 15px;}
{padding-bottom: 15px;}

to surround it?

okay I figured part of it out.

.container ul.allposts .postwrapper .divider {
width: 500px;
border-bottom: 1px solid #e8e8e8;
margin: 0 0 30px 185px;
both;
padding-left: 15px;
padding-right: 15px;
padding-top: 15px;
padding-bottom: 15px;
}

the issue I’m having is making it a solid color now

That will work, but the shorthand way is
{padding: 15px;}

You can also do:
{padding: 10px 15px 5px;} which gives 10 on top, 15 left & right, and 5 on the bottom

And then the Terrible (TRBL)
{padding: 2px 4px 6px 8px} defines top, right bottom and left, in that order.

What is it you want to be a solid color?

Actually, looking at your Tumblr page, since <div class=“divider”> appears to only be nested within <div class=“postwrapper”> it’s probably safe to specify the divider DIV just using its own class. If it turns up somewhere else where you don’t want the padding, then do .postwrapper.divider {... } to nail it down to things within the postwrapper DIV only.

Wow that makes sense. Turns out the .divider section is completely separate from .postwrapper and I only had to add the padding to .postwrapper. thanks a bunch!

@andreasbmx Glad to be of help. If you could follow that discussion, get Firefox and the Firebug extension for it. Right click any element and select “Inspect Element” and you’ll get a split pane at the bottom of the screen showing the HTML with all the classes and IDs, and the styles pertaining to them. Mousing over an HTML element in the bottom left will highlight it in the top web-page view, showing its padding and margins in different colors. It’s a tremendously useful tool for website development.

Yeah I guess I downloaded it accidentally because I’ve been using firebug for a while before you helped me out. I couldn’t make sense of it though.

That’s what I used to look at the page and grok what HTML elements and CSS specifiers there were available to attach a style to. Play with it some hovering your mouse over the HTML elements shown in the lower left to see the highlighting action in the top panel, and clicking a specific HTML element to see the CSS styles directly attached to it and those being inherited by it.