how whitespace can make a page much easier to read : padding « CSS « HTML / CSS






  1. HTML / CSS
  2. CSS
  3. padding

how whitespace can make a page much easier to read

  
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>A CSS Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style rel="stylesheet" type="text/css">
table,th,td {
  border: solid 2px #000000;
}

table {
  margin: 15px;
}

th,td {
  padding: 20px;
}
</style>
</head>

<body>
<p>This example shows how whitespace can make a page much easier to read. </p>
<table>
  <tr>
    <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit</td>
    <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit</td>
  </tr>
</table>
<p></p>
</body>
</html>








Related examples in the same category

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.No padding
18.with padding
19.padding:0.25em; assigns one-quarter of the font size to padding (i.e., font-sizemultiplied by 0.25).
20.Using Container Attributes
21.Use padding shortcut
22.Padding shortcut '10px 0 0 0'
23.Set margin and padding to 0
24.
25.Using padding on a parent element to avoid problems with margin widths
26.margin collapse and nested elements with default padding
27.margin collapse with nested elements padding