CSS - Padding

Boxdim

About

The padding area is the space between the content of the box and its border.

In the below image, this are the areas:

  • TP (top padding)
  • BP (bottom padding)
  • LP (left padding)
  • RB (right padding)

Css Padding

This area is a part of the background.

Example

2 lengths / 2 axis

  • The padding css for every paragraph element
    • top and bottom paddings are 10px,
    • right and left paddings are 20px.
p { 
    padding: 10px 20px; 
    /* same than 
    padding-top:10px; 
    padding-bottom:10px; 
    padding-right:20px; 
    padding-left:20px; 
    */
}
  • Further styling of the p element
    • A background to show that the padding is part of the background
    • And the box border
p {
    background-color: skyblue; 
    border: 1px solid
}
  • The HTML to style
<p>Lorem Ipsum</p>
  • The result

3 lengths / 1 side - 1 axis - 1 side

  • top padding is 10px,
  • right and left paddings are 20px,
  • bottom padding is 30px.
p {
    padding: 10px 20px 30px; 
    /* same as
    padding-top: 10px;
    padding-right: 20px;
    padding-left: 20px;
    padding-bottom: 30px;
    */
    background-color: skyblue; 
    border: 1px solid 
}
<p>Lorem Ipsum</p>

4 lengths / 4 sides

  • top padding is 10px,
  • right padding is 20px,
  • bottom padding is 30px,
  • left padding is 40px.
p { 
    padding: 10px 20px 30px 40px;
    background-color: skyblue; 
    border: 1px solid 
}
<p>Lorem Ipsum</p>

Usage

  • Using a fix navigation bar, the padding top on the body element is set otherwise the fix bar will overlay the content
  • Adding a gap between the background edge and the text know as a gutter

Syntax

This area is set:

  • with the padding properties 1) 2):
    • padding-top (TP),
    • padding-right (RP),
    • padding-bottom (BP),
    • padding-left (LP)
  • or with the shorthand padding to avoid setting each side separately.

padding properties cannot utilize negative length, margin can





Discover More
Boxdim
CSS - Background (Image)

The background of an element is the total size of the element: including padding and border but not the margin. The margin is transparent. When two element overlap, you can send one element to...
Firebug Box Sizing
CSS - Box sizing (property and definition)

The box-sizing property is used to alter the default box model used to calculate widths and heights of elements. The width and height are defined as the width and height: of the or of the depending...
Css Box Size Content
CSS - Height of a box

This page is the height of a box. From How it's calculated To How it's defined HTMLheight attributeHTMLimage...div element When a absolute length value is set, the value applied directly...
CSS - Inline Box

CSS Inline is a layout used to layout inline xml element (ie text formatting context) It's used in differents formatting context: the block level as an the flex level as also its ... An inline-level...
Boxdim
CSS - Spacing (Box Dimension)

spacing in CSS is not a specific term but refers generally to the setting of the following of a box properties: - the padding set how far from the border the text should be and is an area taken into...
Boxdim
CSS - Width property (of a box)

The width property specifies the width of boxes and it's calculation is defined by the box sizing property. HTMLCSS HTML width attributeHTMLimgiframe... If you want to set a width on a p element for...
Css Horizontal Alignement Result
CSS Block - Align (Left, Center, Right)

How to align a visual element with a block display horizontal positioning article You can align visual element on two level: on the box level: the box is aligned on the text level: the text in the...
Grid Form With Horizontal Vertical Alignment
How to solve a CSS grid overflow ?

This page will show and explain you why a overflow may happen in a css grid layout context. This simple example shows: a two columns grids that should have the same space because they get...



Share this page:
Follow us:
Task Runner