The confusion about * {margin:0; padding:0;}
Asked Answered
G

5

6

In some articles that I've read, the use of * {margin:0; padding:0;} is discouraged as it would affect the web site's performance. So I turned to a reset.css stylesheet.

But I'm wondering, how does it affect the performance?

Granthem answered 6/6, 2011 at 13:25 Comment(0)
F
9

The reasoning behind this was discussed in this Eric Meyer post.

This is why so many people zero out their padding and margins on everything by way of the universal selector. That’s a good start, but it does unfortunately mean that all elements will have their padding and margin zeroed, including form elements like textareas and text inputs. In some browsers, these styles will be ignored. In others, there will be no apparent effect. Still others might have the look of their inputs altered. Unfortunately, there’s just no way to know, and it’s an area where things are likely to change quite a bit over the next few years.

So that’s why I don’t want to use the universal selector, but instead explicitly list out elements to be reset. In this way, I don’t have to worry about munging form elements. (I really should write about the weirdnesses inherent in form elements, but that’s for another day.)

That said, the following chart from this Steve Souders post shows the difference in load times for a test page using universal selectors compared with a page using descendant selectors.

enter image description here

Fotinas answered 6/6, 2011 at 13:39 Comment(0)
P
4

it is effect the performance because the browsers engine have to apply this style to every element on the page this will lead to heavy rendering specially in the big pages with a lot of elements and this method is a bad practice too because it may remove a good default styles for some elements

you may optimize this code by reduce the scope of it like using it on just some elements that make the problems like this

h1,ul {
margin:0;

padding:0;
}

Paulownia answered 6/6, 2011 at 13:46 Comment(0)
T
1

Using *{margin:0;padding:0;} in your stylesheet will not affect performance and is helpful in tackling various formatting issues.

Using a separate reset.css does have some performance issues, as you are forcing the user to requested one more file from the server. In the grand scheme of things, a few kb on a high speed line is nothing. But another file for someone on a mobile browser can be too much.

Thermy answered 6/6, 2011 at 13:40 Comment(0)
D
0

I think the website you read that on needs its head checked, a reset style sheet is the way to go to level the playing field. The overhead is so marginal it won't make a difference especially with modern browsers.

Dry answered 6/6, 2011 at 13:28 Comment(0)
U
-1
body {padding:0;margin:0;} 

It effects the webpage display because without its use we have to

margin-left:-7px;
margin-top:-7px;

etc. like substitutions to avoid a narrow white strip on the left and top of the webpage.

Urochrome answered 29/3, 2013 at 21:55 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.