Thuộc tính padding shorthand trong CSS

Thuộc tính padding trong CSS cho phép thiết lập padding cho 4 cạnh: padding-top, padding-right, padding-bottom, padding-left. Đây là shorthand property.

Ví dụ: padding: 10px 5px 7px 10px;

top padding: 10px
right padding: 5px
bottom padding: 7px
left padding: 10px

Ví dụ 1: 4 giá trị % cho div container

<!DOCTYPE html>
<html>
<head>
<style>
div {
  height: 150px;
  width: 300px;
  padding: 5% 10% 20% 5%;
  background-image: url("https://www.tutorialspoint.com/images/home_tensor_flow.png");
  text-align: center;
  font-weight: bold;
  font-size: 1.2em;
  box-sizing: border-box;
}
div > div {
  border-radius: 80px;
  padding: 2em 2em;
  box-shadow: 0 0 4px 0.8px black;
}
</style>
</head>
<body>
<div>Học TensorFlow <div>TensorFlow là framework ML open source cho mọi developer.</div></div>
</body>
</html>

Kết quả

Ví dụ 2: 2 giá trị % cho div, padding cho con

<!DOCTYPE html>
<html>
<head>
<style>
div {
  height: 150px;
  width: 100px;
  padding: 5% 1%;
  background-color: papayawhip;
  border-radius: 5%;
  box-sizing: border-box;
}
div > div {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  padding: 2em;
  box-shadow: 0 0 9px 1px black;
}
span { padding: 10px; }
</style>
</head>
<body>
<div>
  <div></div>
  <span><i>button</i></span>
</div>
</body>
</html>

Kết quả

Quy tắc padding shorthand:

Lưu ý: Dùng box-sizing: border-box để padding không làm tăng kích thước phần tử.