CODEWITHSUNDEEP
htmlcss
FiveTools
FiveTools

Reputation: 6030

What is the purpose of this CSS snippet?

I have the following snippet in my stylesheet. What is the impact or purpose?

* {
    margin:0;
    padding:0;
    top: 0px;
    left: 0px;
}

Upvotes: 8

Views: 266

Answers (5)

Alin P.
Alin P.

Reputation: 44346

It's a reset CSS. It's purpose is to remove default non-zero spacings for all (*) elements. All browsers have some default style sheet and they're not very consistent with each other. Take <form> as an example.

Note: Setting the left and top properties to 0px doesn't look right to me. It will most probably cause problems with absolute positioning. When positioning an element absolutely you may want to define only it's vertical or horizontal offset (not both), leaving the other offset unchanged. That reset CSS doesn't allow that because it gives values for both vertical and horizontal. Also you may want to position an element from the bottom. If you have that reset it will have both bottom and top which in most cases is not wanted and may alter the height of the element or not respect one of the offsets. In any case it will give you something not intended and break your layout.

For those who want to learn more: http://www.w3.org/TR/CSS2/visuren.html#absolute-positioning

Upvotes: 8

JSJ
JSJ

Reputation: 5691

The Estric simbol is known as all /everything so the meaning of this is the CSS will be implemented over all elemetns and set the values as parametered.

Upvotes: 0

STW
STW

Reputation: 46376

It applies the rules contained within to all elements of the page; creating a predictible baseline for cascading rules.

The technique is called a "reset" (google for "CSS Reset") and is an approach to resolve different browsers using different default CSS rules.

These rules should applied as early as possible, typically at the start of the first-loaded CSS sheet.

Upvotes: 1

karllindmark
karllindmark

Reputation: 6071

The purpose of your snippet is to reset the margin, padding and set the position to the top-left corner of the viewport in your web-browser.

Upvotes: 0

miku
miku

Reputation: 188064

It is a reset. All elements will have 0 margin, padding, etc. after that.

Such resets are useful to normalize behavior (some browsers come with predefined margins, paddings, etc.) and to increase visual consistency across browsers.

Upvotes: 11

Related Questions