CSS padding inside a box

on May 1, 2016

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

try it online