The padding property in CSS


In the previous CSS lesson readers read along with Taimienphi.vn to learn the list format attributes (list) in CSS, in the next lesson below, Taimienphi.vn will introduce you to the padding attribute in CSS.


The padding property in CSS is used to create a space between the display content of an element and its border. Refer to the following CSS lesson of Taimienphi.vn to learn padding properties in CSS.

The padding property in CSS

Table of Contents:
1. The padding attribute in CSS
1.1. Shortened padding attribute
1.2. Width attribute
1.3. The padding property in CSS

1. The padding attribute in CSS

CSS includes attributes to specify padding for each element’s space:

– Padding-top attribute.

– Padding-right attribute.

– Padding-bottom attribute.

– Padding-left attribute.

All padding properties may include the following values:

– length: Specify the padding value as px, pt, cm, etc.

-%: Specifies the padding value as a% width of the containing element.

– inherit: Specifies the padding value to be inherited from the parent element.

Note: The padding properties do not accept negative values.

For example:

Crystal padding in CSS

The output will look like the following:

padding in css 2

1.1 Shortened padding attribute

To shorten the code, we can specify all of the padding properties in one declaration.

Use properties padding To declare all of the following properties in one declaration:

– Padding-top attribute.

– Padding-right attribute.

– Padding-bottom attribute.

– Padding-left attribute.

Inside:

– If attributes padding There are 4 values:

padding: 25px 50px 75px 100px;

The upper padding is 25px

The right padding is 50px

The padding below is 75px

The padding on the left is 100px

Example 1:

padding in css 3

The output will look like the following:

padding in css 4

– If attributes padding There are 3 values:

padding: 25px 50px 75px;

The upper padding is 25px

Right and left padding is 50px

The padding below is 75px

Example 2:

padding in css 5

The output will look like the following:

padding in css 6

– If attributes padding There are 2 values:

padding: 25px 50px;

The top and bottom padding is 25px

Right and left padding is 50px

Example 3:

padding in css 7

The output will look like the following:

padding in css 8

– If attributes padding has 1 value:

padding: 25px;

All padding is 25px

Example 4:

padding in css 9

The output will look like the following:

padding in css 10

1.2 Width attribute

Properties width in CSS defines the width of the content area of ​​the element. The content area is the inner part of the padding, the border and the margin of the element (called Box Model – the format of the box and box surrounding an element).

So if the element width is specified, when we add padding to that element, it will be calculated into the total width of the element.

Example 1:

padding techniques in css 11

The output will look like the following:

padding in css 12

In this example the element div has a specified width of 30px. However the actual width of the element div is 350px (300px + 25px padding on the left + 25px padding on the right).

To keep the width of the element div is 300px even when adding padding, we use the attribute box-sizing.

Example 2:

padding in css 13

The output will look like the following:

padding in css 14

1.3 Padding attribute in CSS

Here is a table listing all padding properties in CSS:

padding in css 15

https://thuthuat.taimienphi.vn/thuoc-tinh-padding-rong-css-50601n.aspx
The above lesson Taimienphi.vn has just introduced you to the padding properties in CSS. Also readers can refer to some other CSS lessons already on Taimienphi.vn to learn more margin attribute in CSS What is it.

.

Add a Comment

Your email address will not be published. Required fields are marked *