Home >> Tutorials/FAQs >> CSS Tutorials >> Index

CSS Tutorials - HTML Formatting Model: Block, Inline and Floating Elements

By: FYICenter.com

Part:   1  2  3   4  5  6  7  8  9 

(Continued from previous part...)

Hot To Specify the Padding Spaces of a Block Element?

CSS offers 4 style properties to control padding spaces of a block element. You can specify them in different ways as shown in the following CSS examples:

  • {padding-top: 30px} - Specifies the top padding to 30 pixels.
  • {padding-right: 10px} - Specifies the right padding to 10 pixels.
  • {padding-bottom: 40px} - Specifies the bottom padding to 40 pixels.
  • {padding-left: 20px} - Specifies the left padding to 20 pixels.
  • {padding: 30px 10px 40px 20px;} - Specifies padding spaces on 4 sides: top, right, bottom and left.

When padding spaces are specified, the size of the content box will be reduced to give room to meet the specified padding spaces on 4 sides. The size of the content box can be calculated as:

Content width = "width" - "padding-left" - "padding-right"
Content height = "height" - "padding-top" - "padding-bottom"

Hot To Test Padding Spaces on All 4 Sides?

If you want test padding spaces on 4 sides of a <P> tag, you can use the following HTML and CSS document. It allows you to specify padding spaces with different values and validate them with legend boxes.

<html><head>
<style type="text/css">
  H1 {font-size: 20px}
  DIV.page {width: 450px; border: 1px solid black}
  TABLE#out {background-color: #ffdddd}
  TD#box {border: 1px solid black}
  P#box {width: 300px; height: 300px; 
    padding: 30px 10px 40px 20px; 
    background-color: #ddddff}
  TD.legend {background-color: #ffffff}
  TD.legend#top {height: 29px}
  TD.legend#content {height: 230px}
  TD.legend#bottom {height: 39px}
</style>
</head><body><div class="page">
<H1>Padding Box Widths on 4 Sides</H1>
<table id=out><tr>
<td id=box><p id=box><script language="JavaScript">
  for (i=0; i<10; i++) {
    for (j=0; j<10; j++) {
      document.write(j+' ');
    }
  }
</script></p></td>
<td valign=top><table>
<tr><td class=legend id=top>- padding-top</td></tr>
<tr><td class=legend id=content>- Content box</td></tr>
<tr><td class=legend id=bottom>- padding-bottom</td></tr>
</table></td>
</tr></table>
<p align="right">By FYICenter.com</p>
<div></body></html>

Save this document as paddingBox.html, and view it with a browser you will see that the content height is reduced from 300px to 230px, because of the top padding 30px, and the bottom padding 40px:
           

(Continued on next part...)

Part:   1  2  3   4  5  6  7  8  9 


Selected Developer Jobs:

More...