Default values for box model properties

Question

what are the default values of padding, border, and margin?

Answer

Depending on each browser those values will vary, therefore is commonly recommended to “reset” those values to 0 in a CSS file. Browsers provide default values for a general support for legible content, but sometimes they will get on your way. Another thing is that not all tags get the same default values for padding or margin, although the only default value for border is medium none currentcolor where medium is the thickness, none is the style, and currentcolor sets it to the color of the background.
Here is a list of common tags and their most common default values:

body  - margin: 8px;

h1 - margin-top: 0.67em;
     margin-bottom: 0.67em;

h2 - margin-top: 0.83em;
     margin-bottom: 0.83em;

h3 - margin-top: 1em;
     margin-bottom: 1em;

h4 - margin-top: 1.33em;
     margin-bottom: 1.33em;

h5 - margin-top: 1.67em;
     margin-bottom: 1.67em;

h6 - margin-top: 2.33em;
     margin-bottom: 2.33em;

p - margin-top: 1em;
    margin-bottom: 1em;

ol - margin-top: 1em;
     margin-bottom: 1em;
     padding-left: 40px;

ul - margin-top: 1em;
     margin-bottom: 1em;
     padding-left: 40px;

Note: Those are mainly text based elements.

What is the difference between px and em in CSS ?

6 Likes

The unit px in CSS is an absolute unit meaning it does not change based on the size of the browser. On the other hand em is a responsive unit meaning it changes based the size of the parent element.

15 Likes

Resource

CSS values and units - Learn web development | MDN

5 Likes

is the recommendation to ‘reset’ margins to 0 for all elements and then adjust specific element margins as necessary

The best answer for this question would be in the Default Style Sheet of your browser. Look for any elements that do not have margin(s) set to zero. For instance, UL, OL, DL and/or LI; or, P which has a top/bottom margin (with collapsing enabled). Also look at padding. Stuff like that. Reset more or less wipes all that away and lets us set everything how we like.

Personally, I’m not a fan of ‘reset.css’, but then once we know how elements render without a style sheet (meaning using only the Default), we don’t need the file.

So is it better to use em instead of px for responsive websites for example?

em helps with adaptive design more than it does ‘responsive’ since it scales proportionately as the user zooms in. However, in more recent years the PX unit demonstrates roughly the same behavior (when zooming in and out).

Responsive design centers more around device width and window dimensions. Ideally we would want to set up media queries to respond to the various device widths for smart phones, tablets, laptops, desktops and large screens. In other words the font size does not scale continuously but is set according to our media query rulesets. In all cases, the scale is 100%. Only when we zoom does the font size scale continuously.

1 Like