Welcome to WebmasterWorld Guest from 54.145.208.64

Forum Moderators: not2easy

Message Too Old, No Replies

Border margins on paragraphs

   
8:33 pm on Nov 28, 2011 (gmt 0)

5+ Year Member



Hi all
Ive got paragraphs that have borders

<p style="background-color:#F5F5F5;border-radius: 5px 5px 5px 5px;text-align:justify;">blah blah blah..</p>


as you can see it has a colour in the background the problem is the text is very close to the edge i was wondering if there was a way to add margin to the paragraph i.e.

<p style="background-color:#F5F5F5;border-radius: 5px 5px 5px 5px;text-align:justify;margin-left:10px;">blah blah blah..</p>


obviously that doesnt work, i dont want to put it in a div as that will mess up the presentation. any ideas appreciated..
9:48 pm on Nov 28, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi there abushahin,

margin-left:10px effects the position of the p element.

To effect the text position within the p element use padding-left:10px. ;)

birdbrain
11:52 pm on Nov 28, 2011 (gmt 0)

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



And then go back and put it all in your CSS where it belongs ;)

p.fuzzy {background-color:#F5F5F5; border-radius: 5px 5px 5px 5px; text-align:justify; padding-left:10px;}

Why are there four values for border-radius? I'd expect two-- or just one, since they're the same.

[w3.org...]

If possible, also think about expressing your radius and padding in ems, since this may come out more consistent across different browsers with different user prefs.
12:52 am on Nov 29, 2011 (gmt 0)

5+ Year Member



thanks guys!
I tried that few weeks ago and it didnt work mustve been the caching on the browser!
and thanks for the tip about consistency with ems! much appreciated.