My Custom CSS Reset Bookmark

A nice and simple reset for CSS defaults, which is pretty similar to the very few CSS resets I am using these days. As a personal preference I‘m not removing the margin on all elements, since I prefer to tweak it when required. Embrace the defaults!

I am now thinking to add removed margins & padding for figure and ul, since this is something that I almost always touch to restyle, so it absolutely makes for a good candidate.

For simplified line-height calculations across various elements Josh mentioned trying to use calc . It‘s a quick and simple way to get good line-height default values set. Yet in my opinion and for my own work (and depending on the typeface), I find it not specific enough and I‘d usually overwrite it for most elements either way.

In many situations it will work, so it is definitely worth trying out.

* {
  line-height: 1.5;
}
Instead of calculating the line height by multiplying the font-size with a number like 1.5, this alternative uses the font-size as a base, and adds a fixed amount of space to each line.
* {
  line-height: calc(1em + 0.5rem);
}

The full article here.


Leave a comment

Available formatting commands

Use Markdown commands or their HTML equivalents to add simple formatting to your comment:

Text markup
*italic*, **bold**, ~~strikethrough~~, `code` and <mark>marked text</mark>.
Lists
- Unordered item 1
- Unordered list item 2
1. Ordered list item 1
2. Ordered list item 2
Quotations
> Quoted text
Code blocks
```
// A simple code block
```
```php
// Some PHP code
phpinfo();
```
Links
[Link text](https://example.com)
Full URLs are automatically converted into links.

Replied on your own website? Send a Webmention!