Ví dụ về thuộc tính padding

Thuộc tính padding-top

Thuộc tính padding-top : thêm vào khoảng không cho thành phần.

Khi sử dụng padding, chiều cao và chiều rộng của thành phần sẽ được cộng dồn đúng khoảng padding.

<html>
<head>
<style type="text/css">
div {
    border: 1px solid red;
}

p {
    background: #00CC00;
    padding-top: 10px;
    width: 200px;
}
</style>
</head>

<body>
<div>
<p>padding top</p>
</div>
</body>
</html>

padding top

Ta thấy chiều cao của thành phần đã được cộng thêm 10px.

Thuộc tính padding-right

Thuộc tính padding-right : thêm vào khoảng không bên phải cho thành phần.

<html>
<head>
<style type="text/css">
div {
    border: 1px solid red;
}

p {
    background: #00CC00;
    padding-right: 10px;
    width: 200px;
}
</style>
</head>

<body>
<div>
<p>padding right</p>
</div>
</body>
</html>

200px

padding right

Ta thấy chiều rộng của thành phần bây giờ là 210px (200px ban đầu + 10px padding-right).

Thuộc tính padding-bottom

Thuộc tính padding-bottom : thêm vào khoảng không bên dưới cho thành phần.

<html>
<head>
<style type="text/css">
div {
    border: 1px solid red;
}

p {
    background: #00CC00;
    padding-bottom: 10px;
    width: 200px;
}
</style>
</head>

<body>
<div>
<p>padding bottom</p>
</div>
</body>
</html>

200px

padding bottom

Ta thấy chiều cao của thành phần đã được cộng thêm 10px.

Thuộc tính padding-left

Thuộc tính padding-left : thêm vào khoảng không bên trái cho thành phần.

<html>
<head>
<style type="text/css">
div {
    border: 1px solid red;
}

p {
    background: #00CC00;
    padding-left: 10px;
    width: 200px;
}
</style>
</head>

<body>
<div>
<p>padding left</p>
</div>
</body>
</html>

200px

padding left

Ta thấy chiều rộng của thành phần bây giờ là 210px (200px ban đầu + 10px padding-left).

Thuộc tính padding

Thuộc tính padding : thêm vào khoảng không cho thành phần, tổng hợp các thuộc tính padding-top, padding-right, padding-bottom, padding-left.

padding với giá trị 1 thành phần

<html>
<head>
<style type="text/css">
div {
    border: 1px solid red;
}

p {
    background: #00CC00;
    padding: 10px;
    width: 200px;
}
</style>
</head>

<body>
<div>
<p>padding 1 thành phần</p>
</div>
</body>
</html>

200px

padding 1 thành phần

Trong đó:
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;

padding với giá trị 2 thành phần

<html>
<head>
<style type="text/css">
div {
    border: 1px solid red;
}

p {
    background: #00CC00;
    padding: 10px 5px;
    width: 200px;
}
</style>
</head>

<body>
<div>
<p>padding 2 thành phần</p>
</div>
</body>
</html>

200px

padding 2 thành phần

Trong đó:
padding-top: 10px;
padding-bottom: 10px;
padding-left: 5px;
padding-right: 5px;

padding với giá trị 3 thành phần

<html>
<head>
<style type="text/css">
div {
    border: 1px solid red;
}

p {
    background: #00CC00;
    padding: 5px 10px 0;
    width: 200px;
}
</style>
</head>

<body>
<div>
<p>padding 3 thành phần</p>
</div>
</body>
</html>

200px

padding 3 thành phần

Trong đó:
padding-top: 5px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 0px;

padding với giá trị 4 thành phần

<html>
<head>
<style type="text/css">
div {
    border: 1px solid red;
}

p {
    background: #00CC00;
    padding: 5px 10px 10px 20px;
    width: 200px;
}
</style>
</head>

<body>
<div>
<p>padding 4 thành phần</p>
</div>
</body>
</html>

200px

padding 4 thành phần

Trong đó:
padding-top: 5px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 20px;