padding-bottom

definition: The padding properties control the space between the content and the border.

Adding padding anywhere within the borders will allow more control of placing the content where you want.

For example:
Input:

<style type="text/css">
div { border:1px solid black; }
#header { padding-bottom:10px; }
</style>

Padding on the bottom is also useful for when you want to put an element within another element, so that everything is positioned properly.

For example:
Input:

<header>
<style type="text/css">
div { border:1px solid black; }
#header { padding-bottom:25px; }
#nav { padding-top:50px; }
</style>
</header>

<body>
<div id="header">Hello.

     <div id="nav">Bye.</div>

</div>
</body>

source: class notes, "The Box Model"





Definition

The padding-bottom property sets the bottom padding (space) of an element.

Note: Negative values are not allowed.

Inherited: No

JavaScript Syntax

CSS properties can also be dynamically changed with a JavaScript.

Scripting Syntax: object.style.paddingBottom="2cm"

In our HTML DOM tutorial you can find more details about the paddingBottom property.

In our HTML DOM tutorial you can also find a full Style Object Reference.
Example:
h1
{
padding-bottom: 10px
}


Page Information

  • 10 months ago [history]
  • View page source
  • You're not logged in
  • No tags yet learn more

Wiki Information

Recent PBwiki Blog Posts