Setting Padding

As noted in the previous section, margins specify vertical and horizontal spacing that is outside an element, and padding adds vertical and horizontal spacing within an element (between the element content and the margins around the element). The easiest way to visualize this is by setting a background for an element, because backgrounds are displayed behind both the content and padding areas for an element, but not behind the margin area.

If no padding is set for an element, then a background color, for instance, is only displayed behind the element's content area. Here's an example of setting a background color for the H1 element while not defining any padding:

 <style type="text/css"> body { margin-left: 5%; margin-right: 5%; ...

Get Cascading Style Sheets (CSS) by Example now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.