padding-left: 1cm; padding-right: .5cm; : padding left « CSS « HTML / CSS






  1. HTML / CSS
  2. CSS
  3. padding left

padding-left: 1cm; padding-right: .5cm;

   

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>HTML/XHTML:  &raquo; CSS1 Padding Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<style type="text/CSS">
#one {border-style: double; border-width: medium; padding-left: 1cm; padding-right: .5cm;}
#two {border-style: double; border-width: medium; padding-top: 1cm; padding-bottom: 1cm;}
#three {border-style: double; border-width: medium; padding: 1cm 1cm; margin: .5cm 4cm;}
</style>
</head>
<body>

<div class="content">
  <p id="one">This paragraph of text has padding on the left and
  right, but not on the top and bottom.</p>
  <p id="two">This paragraph has padding, but this time only on the
  top and bottom.</p>
  <p id="three">Be careful when using margins. They don't necessarily
  apply to the text within the box, but to the box itself.</p>
</div>
</body>
</html>








Related examples in the same category

1.'padding-left' Example
2.padding-left: 0px
3.padding-left: 8px;
4.padding-left: 1.5em;
5.Independently set padding-left, padding-right, padding-top, and padding-bottom.
6.The element's background is displayed in the padding area.
7.padding:0 is the default.
8.Combine negative text-indent and padding-left