Buzz
The CSS padding attribute is used to create space between the displayed content of an element and its border. Refer to the following CSS lesson by Mytour to learn about CSS padding attributes.
CSS Padding Attribute
1. CSS Padding Properties
1.1. Compact Padding Property
1.2. Width Property
1.3. CSS Padding Property
1. CSS Padding Properties
CSS includes properties to specify padding for each space within an element:
- The padding-top property.
- The padding-right attribute.
- The padding-bottom attribute.
- The padding-left attribute.
All padding attributes may include the following values:
- length: specifies padding value in units such as px, pt, cm, ... .
- %: specifies padding value as a percentage of the containing element's width.
- inherit: specifies padding value inherited from the parent element.
Note: Padding attributes do not accept negative values.
Example:
The output result appears as follows:
1.1 Compact Padding Attribute
To condense code, we can specify all padding attributes in one declaration.
Use the padding property to declare all the following attributes in one declaration:
- The padding-top attribute.
- The padding-right attribute.
- The padding-bottom attribute.
- The padding-left attribute.
Where:
- If the padding property has 4 values:
padding: 25px 50px 75px 100px;
Top padding is 25px
Right padding is 50px
Bottom padding is 75px
Left padding is 100px
Example 1:
The output result appears as follows:
- If the padding property has 3 values:
padding: 25px 50px 75px;
Top padding is 25px
Right and left padding are 50px
Bottom padding is 75px
Example 2:
The output result appears as follows:
- If the padding property has 2 values:
padding: 25px 50px;
Top and bottom padding are 25px
Right and left padding are 50px
Example 3:
The output result appears as follows:
- If the padding property has 1 value:
padding: 25px;
All paddings are 25px
Example 4:
The output result appears as follows:
1.2 The Width Attribute
The width attribute in CSS determines the content area width of an element. The content area includes the space inside padding, border, and margin of the element (referred to as the Box Model - the frame surrounding an element).
So if the width of an element is specified, when we add padding to that element, it will be counted towards the total width of the element.
Example 1:
The output result appears as follows:
In this example, the div element has a specified width of 30px. However, the actual width of the div element is 350px (300px + 25px left padding + 25px right padding).
To maintain the div element's width at 300px even when padding is added, we utilize the box-sizing property.
Example 2:
The output result appears as follows:
1.3 The Padding Attribute in CSS
Below is a table listing all the padding attributes in CSS:
In this lesson, Mytour has just introduced you to the padding attributes in CSS. Additionally, readers can refer to other CSS lessons already available on Mytour to learn more about margin attributes in CSS.
