Using padding on a parent element to avoid problems with margin widths

  

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Using padding on a parent element to avoid problems with margin widths</title>
  <style type="text/css">
    div {
      padding: 0 0 0 2em; 
    }
    p { 
      font-size: 1em;
      margin: 0;
    }
    h1 { 
      font-size: 1.5em;
      margin: 0;
    }
  </style>
</head>
<body>
  <div>
    <h1>A heading</h1>
    <p>Some body text</p>
  </div>
</body>
</html>

1.	'padding' Example
2.	Padding with one value
3.	Padding with two value
4.	Padding with three value
5.	Padding with four value
6.	padding: 10px
7.	padding: 2px 4px 6px 8px;
8.	padding: 2px 8px 6px;
9.	padding: 2px 8px;
10.	padding: 2px;
11.	padding: 5px;
12.	padding: 1em;
13.	padding: 16px;
14.	Style sheet for padding example
15.	padding: 5px 0 12px 0; for td
16.	padding sets the size of the padding surrounding the inner box.
17.	how whitespace can make a page much easier to read
18.	No padding
19.	with padding
20.	padding:0.25em; assigns one-quarter of the font size to padding (i.e., font-sizemultiplied by 0.25).
21.	Using Container Attributes
22.	Use padding shortcut
23.	Padding shortcut '10px 0 0 0'
24.	Set margin and padding to 0
25.	padding: 0 0 0.75em 0
26.	margin collapse and nested elements with default padding
27.	margin collapse with nested elements padding

Using padding on a parent element to avoid problems with margin widths : padding « CSS « HTML / CSS

Related examples in the same category