Confusion about * {margin: 0; padding: 0;}

Question

In some articles I read, using * {margin:0; padding:0;} * {margin:0; padding:0;} not recommended as this will affect website performance. So I turned to the reset.css .

But I wonder how this affects performance?

Answer 1

The rationale for this was discussed in this post by Eric Meyer.

That is why so many people zero out their indents and margins are all in the order of the universal selector. This is a good start, but unfortunately, it means that all elements will have their own additions and margin zeroed, including form elements like text fields and text inputs. In some browsers, these styles will be ignored. In other cases, there will be no visible effect. Still others can change the look of their inputs. Unfortunately, they do not know, and his area where things are likely to change in the next few years.

So that’s why I don’t want to use a universal selector, but instead explicitly list the elements that should be reset. Thus, I do not need to worry about the mint shape elements. (I really should write about the oddities inherent in the elements of the form, but this is the next day.)

However, the following graph from this Post by Steve Souders shows the difference in loading time for a test page using universal selectors compared to a page using descendant selectors .

Answer 2

this affects performance, as the browser engine must apply this style to every element of the page, which will lead to heavy rendering, especially on large pages with a lot of elements, and this method is also bad practice as it can remove good default styles for some elements

you can optimize this code by reducing its size, using it only on some elements that create problems like this

h1,ul {
margin:0;
padding:0;
}

Answer 3

I think that the website you are reading on which the head is checked is a reset style sheet is a way to reach the level of the playing field. The overhead is so insignificant that it will not matter much, especially for modern browsers.

Answer 4

Using *{margin:0;padding:0;} in your stylesheet will not affect performance and will help in solving various formatting problems.

Using a separate reset.css has some performance issues, since you force the user to request another file from the server. In a grand scheme of things, a few kilobytes on a high-speed line is nothing. But there may be too many other files for someone in a mobile browser.

Answer 5

 body {padding:0;margin:0;} 

It affects the display of the web page, because without using it we must

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

etc .. as replacements to avoid the narrow white bar on the left and top of the web page.