CSS padding inside a box

CSS padding property specify the width of the padding area of a box.

CSS property padding

CSS version: CSS 2.1
Value: padding-width{1,4}
Initial: 0 for individual properties
Applies to: all elements except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column
Inherited: no
Percentage: refer to width of containing block

padding values

padding property can be used to specify padding-top, padding-right, padding-bottom, and padding-left (in this order). If less than 4 values are specified, these rules apply.

body { padding: 2px }         /* all paddings set to 2px */
body { padding: 1px 2px }     /* top and bottom = 1px, right and left = 2px */
body { padding: 1px 2px 3px } /* top=1px, right=2px, bottom=3px, left=2px */

padding example

In the following code, CSS property padding can be changed to the following values
  • 5px
  • 10px
<style type="text/css">
.box1 {
 width: 50px; height: 50px; background-color:lightgreen; border: 1px solid gray;
 padding: 5px;
}
.box2 {
 width: 50px; height: 50px; background-color:lightgreen; border: 1px solid gray;
}
</style>

<div class="outer">
  <div class="box1">div1</div>
  <div class="box2">div2</div>
</div>
padding refresh

Related

Specification

Share this article: share on Google+ share on facebook share on linkedin tweet this submit to reddit

Comments

Click here to write/view comments