homepage Welcome to WebmasterWorld Guest from 54.161.246.212
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
pad that text
pelachrum

10+ Year Member



 
Msg#: 8059 posted 6:12 am on Dec 16, 2005 (gmt 0)

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

10+ Year Member



 
Msg#: 8059 posted 11:27 am on Dec 16, 2005 (gmt 0)

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

10+ Year Member



 
Msg#: 8059 posted 5:44 pm on Dec 16, 2005 (gmt 0)

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved