Browsers provide default settings for the layers of some elements' boxes. For example, consider the indentation of this list:
Try using your browser's inspector tools to discover which element and which layer property is used to indent the content.
If you are unhappy with the default indentation, you can override it:
Try changing the indentation to 0. What do you notice?
Each browser decides what default values it will use for the box properties. One browser might indent the list by 50 pixels and another by 60. Some web developers use a CSS reset, which is a stylesheet that establishes a uniform baseline of values.
Consider also the blockquote element, which your browser probably indents:
Trying using your browser's inspector tools to discover which layer property is used to indent the content.
Suppose you want to add a bar on the left of these quotations to add some stylistic flair. You can achieve this with a left border:
The text of the quotation runs right into the border. Text should never run right up to the edge of any boxes. Which property do you set to add some spacing?
Once you add the spacing, the text does not feel cramped:
You've seen how you can use padding and margin to override the default indentation of elements. This power should be wielded carefully. You want the elements of your page to align as much as possible to tie your page together from top to bottom. Place a ruler or other straight edge on your screen to serve as an axis of alignment. If your boxes don't line up along the ruler, adjust your spacing.