PDA

View Full Version : Default Margins/Padding


fwr1000
11-24-2006, 06:20 PM
I am using CSS for styling sites but still am with Tables for overall layout using templates. Want to move on to "pure" CSS to do both formatting and positioning.

One things I can't seem to find an answer on though is what is the Default Margin for an element? Example; Have a p element. If I do not set margins for p with a CSS style, how much "space" will be taken up by a paragraph just using the default?

Thnx
Fred

ramandeep
11-24-2006, 07:35 PM
Hi Fred,
Yes when you use CSS for positioning and formatting you will find many problems as per different browsers but the main as per my knowledge is the box model differences
There is tutorial on box model in tutorials section, It tells you how the elements are displayed on the page.

Padding, borders and margins are optional and defaults to zero, however many elements are given padding and margins by user agents.

You can override these browser styles by setting the elements margin and padding to zero.

You can do it per element basis or for all elements by using universal selector like

*{
margin: 0;
padding: 0;
}

chriskq
11-27-2006, 09:04 PM
you are correct in asking about default padding and margin when talking about a <p> tag.
basically you can overwrite this 2 ways.

Give the p tag a class. eg: <p class="content">
then css
p.content {margin:0px; padding:0px;}

or target the p tag within a certain td, tr or table.
so css would be:
table#main p { }

hope that made sense... theres many different ways to acheive css styling you have to remember.

fwr1000
11-28-2006, 12:17 AM
Thanks for the help. It sounds like best to initially set tags (p, ul, ui, etc) to 0 padding and margin and then make adjustments to get page positioning where you want it. (Realize float is also a positioning tool)

One of the things that makes is confusing at times is the "many ways to skin a cat" when using CSS.

Thnx again