Thuộc tính padding-block trong CSS
Bùi Tấn Lực - 821
- 08/10/2025
Thuộc tính padding-block trong CSS dùng để quy định khoảng cách giữa cạnh trên và cạnh dưới của một thẻ HTML với các phần tử con nằm trong thẻ đó, chi tiết như nào hãy cùng chúng tôi phân tích:
Chức năng của Thuộc tính padding-block trong CSS
Thuộc tính padding-block trong CSS dùng để quy định khoảng cách giữa cạnh trên và cạnh dưới của một thẻ HTML với các phần tử con nằm trong thẻ đó, bạn có thể dùng đơn vị px, em, % để quy định khoảng cách.
Cú pháp của Thuộc tính padding-block trong CSS
padding-block: giatri;
giatri: Giá trị để quy định khoảng cách giữa cạnh trên và cạnh dưới của phần tử HTML với các phần tử con của nó (Ví dụ:10px, 2%, 2em,....)
Ví dụ: padding-block:10px;
padding-block:giatri1 giatri2;
giatri1: Giá trị để quy định khoảng cách giữa cạnh trên của phần tử HTML với các phần tử con của nó (Ví dụ:10px, 2%, 2em,....)
giatri2: Giá trị để quy định khoảng cách giữa cạnh dưới của phần tử HTML với các phần tử con của nó (Ví dụ:10px, 2%, 2em,....)
Ví dụ: padding-block:10px 30px;
Code Thuộc tính padding-block trong CSS
padding-block:10px;
(Cạnh trên cách các phần tử con 10px, Cạnh dưới cách các phần tử con 10px)
padding-block:10px 30px;
(Cạnh trên cách các phần tử con 10px, Cạnh dưới cách các phần tử con 30px)
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính padding-block trong CSS</title>
<style>
*{-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
div {width:100%; float:left; height:auto; margin-bottom:10px; border:1px solid red}
p {background:green; width:100%; float:left; margin:0px; padding:25px;color:#fff}
span {width:100%; float: left; heigt:auto; margin-bottom:10px}
</style>
</head>
<body>
<h1>Code Thuộc tính padding-block trong CSS</h1>
<span>Quy định khoảng cách giữa cạnh trên và cạnh dưới của một thẻ HTML với các phần tử con nằm trong thẻ đó, bạn có thể dùng đơn vị px, em, % để quy định khoảng cách:</span>
<div style="padding-block:10px"><p>padding-block:10px (Cạnh trên cách các phần tử con 10px, Cạnh dưới cách các phần tử con 10px)</p></div>
<div style="padding-block:10px 30px"><p>padding-block:10px 30px (Cạnh trên cách các phần tử con 10px, Cạnh dưới cách các phần tử con 30px)</p></div>
<div style="padding-block:5%"><p>padding-block:5% (Cạnh trên cách các phần tử con 5%, Cạnh dưới cách các phần tử con 5%)</p></div>
<div style="padding-block:2em"><p>padding-block:2em (Cạnh trên cách các phần tử con 2em, Cạnh dưới cách các phần tử con 2em)</p></div>
<div style="padding-block:0"><p>padding-block:0 (Cạnh trên cách các phần tử con 0px, Cạnh dưới cách các phần tử con 0px)</p></div>
<div style="padding-block:0px"><p>padding-block:0px (Cạnh trên cách các phần tử con 0px, Cạnh dưới cách các phần tử con 0px)</p></div>
</body>
</html>
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính padding-block trong CSS.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
