Using the CSS Star Selector to Zero Out Margins and Paddings

微信扫一扫,分享到朋友圈

Using the CSS Star Selector to Zero Out Margins and Paddings

Using the CSS Star Selector to Zero Out Margins and Paddings — Cautiously

You can run over default browser styles with * { margin: 0; padding: 0; }, but be cautious.

A simple Google search for “css star selector” shows alarming results.

The * selector matches all elements in the DOM. In fact, you’re already using the star selector without knowing it. When you use other selectors like class or element , they already imply the star selector. So this:

ul {}

The parser really sees this.

* ul {}

Now let’s take a second to look at these CSS lines.

* {
margin: 0;
padding: 0;
}

What this code does is to run over, like an elephant, every default style on the page. This can be useful as sometimes different browsers have different default stylings for different elements. And, because sometimes you just want to define everything yourself.

There are elegant and scalable ways to reset styles. One example is to use a library like normalize.css for building a large website.

But sometimes you just want it quick and dirty. Or, sometimes you just want to reset things for debugging or development purposes.

And if you want to go all out, you can add that border and outline should also be at zero. It looks like this.

* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
}

But be warned that there are two potential downsides to this technique.

  1. Sometimes it can cause performance issues. Steve Souders wrote this beautiful article explaining the performance damage of star selectors.

Performance Impact of CSS Selectors

A few months back there were some posts about the performance impact of inefficient CSS selectors. I was intrigued …

www.stevesouders.com

2. You might very well end up finding yourself resetting default styles that you don’t really want to reset, which greatly varies between different elements on different browsers (such as the submit button for example. So be cautious.

That’s it for now. Please feel free to comment below and suggest your own takes on working with the star selector to run over everything else.

Until next time, Cheers.

微信扫一扫,分享到朋友圈

Using the CSS Star Selector to Zero Out Margins and Paddings

Problem python / django - bidi brackets in the html selection list

上一篇

有攻击者正发动中间人攻击 GitHub和京东受影响最大

下一篇

你也可能喜欢

Using the CSS Star Selector to Zero Out Margins and Paddings

长按储存图像,分享给朋友