Style websites width CSS resets

HTML elements have display rules set by each browser that can be the same or different. So we need to reset the general styles for the HTML tags to a common standard, which makes it possible to display the similarities between browsers called Reset css. In this article, I want to share css options This, set the kernel (which I use the same file Normalize.css).

1. Box sizing
2. Removing margins and paddings
3. Lists
4. Forms and Buttons
5. Images and embeds
6. Tables
7. The hidden attribute

Box Sizing

The box-sizing changes the way the Box model works. It changes so that height , width , border , padding and margin are recalculated.

The default value for box-sizing is content-box . For me, I prefer to use border-box because it helps me style the padding and width more easily.

For more information about Box Sizing, see ” Understanding Box sizing “.

Removing margins and paddings

For different elements, the browser sets different margin and padding values. Often these default values ​​are ignored or ignored by people. When I code, I often like to reset the values ​​for margin and padding .

Lists

I use unordered lists in many situations and I don’t need a style disc in most of them. I set list-style none . When it is necessary to set the style disc , we put it back to the original.

Forms and buttons

The browser doesn’t inherit typography for forms and buttons. They put the font: 400 11px sýtem-ui , I find this strange. And I always have to make them inherit elements from their ancestors manually.

Different browsers have border styles for different forms and buttons. I dislike these default styles and want to reset them to 1px solid gray

I have made a few adjustments to the buttons

1. Considering padding: 0.75em 1rem because they seem reasonable based on my experience.
2. Removes the default border-radius applied to buttons
3. Button background color is transparent.

Finally I consider pointer-event: none for the elements in a button. This is mainly used for Javascript interaction. (When a user clicks something in a button, event.target is what they click, not the button. This makes it easier to click events if there are HTML elements inside a button.) .

Components include images, videos, objects, iframes, and embeds. I tend to let these components fit into the width of their containers. I also set these elements to display: blocks because inline-block creates unwanted spaces at the bottom of the element.

Tables

I rarely use tables, but sometimes they can be helpful. This is the default type I will start with:

When an element has a hidden attribute, it will be hidden from view. Normalize.css has already done this.

summary

Above I introduced the role of css reset and some settings when resetting css. If you need additional, please comment with me. Good luck !