Giá trị padding-box trong CSS

Sử dụng thuộc tính CSS background-origin để đặt giá trị padding-box. Với giá trị padding-box, hình ảnh nền bắt đầu từ góc trên bên trái của cạnh padding.

Ví dụ

Bạn có thể chạy mã sau để triển khai giá trị padding-box:

<!DOCTYPE html>
<html>
  <head>
    <style>
      #value1 {
        border: 3px solid blue;
        padding: 30px;
        background: url(https://www.tutorialspoint.com/assets/videotutorials/courses/html_online_training/380_course_216_image.jpg);
        background-repeat: no-repeat;
        background-origin: padding-box;
      }
      #value2 {
        border: 3px solid orange;
        padding: 30px;
        background: url(https://www.tutorialspoint.com/assets/videotutorials/courses/html_online_training/380_course_216_image.jpg);
        background-repeat: no-repeat;
        background-origin: border-box;
      }
      #value3 {
        border: 3px dashed yellow;
        padding: 30px;
        background: url(https://www.tutorialspoint.com/assets/videotutorials/courses/html_online_training/380_course_216_image.jpg);
        background-repeat: no-repeat;
        background-origin: content-box;
      }
    </style>
  </head>
  <body>
    <h1>Giá trị padding-box</h1>
    <div id="value1">
      <h2>Tiêu đề 2</h2>
      <p>Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo.</p>
      <h3>Tiêu đề 3</h3>
      Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo.</p>
    </div>
    <h1>Giá trị border-box</h1>
    <div id="value2">
      <h2>Tiêu đề 2</h2>
      <p>Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. <h3>Tiêu đề 3</h3> Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo.</p>
    </div>
    <h1>Giá trị content-box</h1>
    <div id="value3">
      <h2>Tiêu đề 2</h2>
      <p>Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. <h3>Tiêu đề 3</h3> Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo.</p>
    </div>
  </body>
</html>