Chạy thử Ví dụ Thuộc tính padding trong CSS

Trình soạn thảo - Chạy thử Ví dụ Thuộc tính padding trong CSS

Kết quả - Chạy thử Ví dụ Thuộc tính padding trong CSS

Tự code rồi chạy thử... Chạy Thử 
<!DOCTYPE html>
<html>
<head>
<title>Chạy thử Ví dụ Thuộc tính padding 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>Chạy thử Ví dụ Thuộc tính padding trong CSS</h1>

<span>Quy định khoảng cách giữa các cạnh của một thẻ HTML với các phần tử con nằm trong thẻ đó, bạn có thể tùy chỉ khoảng cách của 4 cạnh: trên, phải, trái, dưới của phần tử HTML cha:</span>

<div style="padding:10px"><p>padding: 10px; (Cách 4 cạnh 10px)</p></div>

<div style="padding:10px 30px"><p>padding: 10px 30px; (Cách cạnh trên dưới 10px, cách cạnh trái phải 30px)</p></div>

<div style="padding:5px 10px 15px 30px"><p>padding: 5px 10px 15px 30px; (Cách cạnh trên 5px, cách cạnh phải 10px, cách cạnh dưới 15px, cách cạnh phải 30px)</p></div>

<div style="padding:5px 10px 30px"><p>padding: 5px 10px 30px; (Cách cạnh trên 5px, cách cạnh trái phải 10px, cách cạnh dưới 30px)</p></div>

</body>
</html>
  • Chạy thử Ví dụ Thuộc tính padding trong CSS nằm trong bài viết Thuộc tính padding trong CSS
  • ★★★★★ ★★★★★