Jump to content

How does this work


youngros

Recommended Posts

I am looking at rebuilding one of my sites again, as it has been commented that people can't find things on the site, so I am looking to make the navigation simpler.

On having a look around at various css templates for ideas on what my work, I found one that could be adapted for my needs.

The question is how does the following work * { padding: 0; margin: 0; } at the top of the style sheet. I can see what it does on the resulting page, but I don't understand how.

Link to comment
Share on other sites

I use

*{padding: 0; margin: 0;}

on all my CSS - various browsers have various default settings for various properties, and setting them all to 0 first and then adding the exact measurement you want later, prevents many cross-browser inconsistencies.

 

However, the opinions are divided - I find the above is simple and fast and takes care of everything at once, others belief it to be more efficient to only set to zero those properties that could be affected like so:

body, address, blockquote, dl, ol, ul, li, fieldset, form,
h1, h2, h3, h4, h5, h6, p, pre {
margin:0;
padding:0;
}

Edited by Andrea
Link to comment
Share on other sites

The star is just a short hand way of way of selecting every element on the page and applying a margin and padding of zero to them.

 

The star is just a selector, like any other:

 

*{
   margin:0;
   padding:0
}

div#content{
   margin:0; /*This div already has a margin of zero due to the rule above*/
}

 

This is quite a slow process, and there are better ways of reseting CSS - check out the Yahoo reset CSS, for example.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...