Welcome to WebmasterWorld Guest from 54.167.82.170

Forum Moderators: not2easy

Message Too Old, No Replies

pad that text

     

pelachrum

6:12 am on Dec 16, 2005 (gmt 0)

10+ Year Member



what's the preferable way of adding padding around the text in CSS? by that I mean the effect that padding in tables gives

i know there's the "padding" attribute but I've seen margin, border and so on i was wondering which one works best

zackattack

11:27 am on Dec 16, 2005 (gmt 0)

10+ Year Member



Hi pelachrum

Not sure altogether what you are trying to do, you could stick some example code up, or explain a bit more maybe. In the meantime, here in brief is some more on padding borders and margins...

Padding is just that, it is padding around an item but part of your elements dimensions. For example...

HTML:

<p>I would like add some <span>padding</span> around some text</p>

CSS:

p span {
padding: 5px 10px 5px 10px;
background: #f03;
}

note: the 4 padding properties relate in a clockwise direction to top-right-bottom-left padding on that element

Borders again add to the dimensions of your elements overall size, and can create an edge for example...

HTML:

<p>I would like to add a <span>border</span> around some text</p>

CSS:

span {
padding: 5px 10px 5px 10px;
background: #f03;
border: solid 2px #ccc;
}

Margins relate to the spacing outside of the element. In the case of your text you can add some margin to create space to the left and right of your newly created boxed text, for example...

HTML:

<p>I would like to add a <span>margin</span> around some text</p>

CSS:

span {
padding: 5px 10px 5px 10px;
background: #f03;
border: solid 2px #ccc;
margin: 0 25px 0 25px;
}

note: you can only add margin to the left and right of whats called an 'inline element'

To add margin to the top and bottom your element would need to be a block element rather than an inline element, but this opens up into more which may not be what you are looking for at all

there is allot more on this - I would recommend experimenting with something simple like the example above and see what happens when you vary these properties.

ZA

cuce

5:44 pm on Dec 16, 2005 (gmt 0)

10+ Year Member



Personally, my approach is as follows

I have my main and auxiliary div where content is stored and those two are contained in my content div:

<div id="content">

<div id="main">
<p>content</p>
</div>

<div id="aux">
<p>more content</p>
</div>

<div id="footer">
<p>footer</p>
</div>

</div>

My content div will have a repeating image which will outline where the two columns are separated, and I float my main and aux divs and size them and add a margin so they are padded in visual relation to the image like so(dont forget to clear the float on the footer):

#content{background:url(bg.gif) #333333;width:700px;}
#main{float:right;width:500px;margin-left:10px;}
#aux{float:left;width:150px;margin-right:10px}
#footer{clear:both;}

I find this keeps things pretty clean.

 

Featured Threads

Hot Threads This Week

Hot Threads This Month