Mô hình khung: Khoảng cách nội bộ trong CSS

Khoảng cách nội bộ của yếu tố nằm giữa viền và khu vực nội dung. Thuộc tính đơn giản nhất để kiểm soát khu vực này là thuộc tính padding.

Thuộc tính padding CSS định nghĩa khoảng trống giữa cạnh của phần tử và nội dung của phần tử.}

Thuộc tính padding CSS

Thuộc tính padding CSS định nghĩa khoảng trống nội bộ của phần tử. Thuộc tính padding chấp nhận giá trị đo lường hoặc tỷ lệ phần trăm, nhưng không được phép sử dụng giá trị âm.

Ví dụ, nếu bạn muốn tất cả các phần tử h1 có lề nội 10 pixel ở tất cả các bên, bạn chỉ cần làm như sau:

h1 {padding: 10px;}

Bạn cũng có thể thiết lập lề nội cho mỗi bên theo thứ tự trên, phải, dưới, trái, mỗi bên có thể sử dụng các đơn vị hoặc tỷ lệ phần trăm khác nhau:

h1 {padding: 10px 0.25em 2ex 20%;}

Thuộc tính lề nội đơn bên

Cũng có thể thiết lập lề nội trên, phải, dưới, trái bằng cách sử dụng bốn thuộc tính riêng lẻ sau:

Bạn có thể đã suy ra, quy tắc dưới đây tạo ra hiệu ứng hoàn toàn giống với quy tắc viết tắt trên:

h1 {
  padding-top: 10px;
  padding-right: 0.25em;
  padding-bottom: 2ex;
  padding-left: 20%;
  }

Giá trị phần trăm của lề nội

Như đã đề cập trước đó, có thể thiết lập giá trị phần trăm cho thuộc tính lề nội của phần tử. Giá trị phần trăm được tính toán tương đối với độ rộng của phần tử cha, giống như biên giới. Do đó, nếu độ rộng của phần tử cha thay đổi, chúng cũng sẽ thay đổi.

Bên dưới là quy tắc này đặt lề nội của đoạn văn thành 10% độ rộng của phần tử cha:

p {padding: 10%;}

Ví dụ: Nếu phần tử cha của một đoạn văn là phần tử div, thì lề nội của nó phải được tính toán dựa trên độ rộng của div.

<div style="width: 200px;">
<p>This paragragh is contained within a DIV that has a width of 200 pixels.</p>
</div>

Lưu ý:Lề trên và lề dưới bằng nhau; tức là tỷ lệ phần trăm của lề trên và lề dưới sẽ được thiết lập tương đối với độ rộng của phần tử cha,而不是 chiều cao.

Ví dụ về lề nội CSS:

Tất cả các thuộc tính lề nội trong một biểu thức
Mô hình này minh họa cách sử dụng tính năng viết tắt để thiết lập tất cả các thuộc tính lề nội trong một biểu thức, có thể có một đến bốn giá trị.
Thiết lập lề dưới 1
Mô hình này minh họa cách sử dụng đơn vị cm để thiết lập lề dưới của ô.
Thiết lập lề dưới 2
Mô hình này minh họa cách sử dụng tỷ lệ phần trăm để thiết lập lề dưới của ô.
Thiết lập lề trái 1
Mô hình này minh họa cách sử dụng đơn vị cm để thiết lập lề trái của ô.
Thiết lập lề trái 2
Mô hình này minh họa cách sử dụng tỷ lệ phần trăm để thiết lập lề trái của ô.
Đặt khoảng cách phải 1
Ví dụ này minh họa cách sử dụng giá trị cm để đặt khoảng cách phải nội bộ của ô.
Đặt khoảng cách phải 2
Ví dụ này minh họa cách sử dụng giá trị phần trăm để đặt khoảng cách phải nội bộ của ô.
Đặt khoảng cách trên 1
Ví dụ này minh họa cách sử dụng giá trị cm để đặt khoảng cách trên nội bộ của ô.
Đặt khoảng cách trên 2
Ví dụ này minh họa cách sử dụng giá trị phần trăm để đặt khoảng cách trên nội bộ của ô.

Thuộc tính khoảng cách nội bộ CSS

Thuộc tính Mô tả
padding Thuộc tính viết tắt. Chức năng là đặt các thuộc tính khoảng cách nội bộ của phần tử trong một biểu đạt.
padding-bottom Đặt khoảng cách dưới nội bộ của phần tử.
padding-left Đặt khoảng cách trái nội bộ của phần tử.
padding-right Đặt khoảng cách phải nội bộ của phần tử.
padding-top Đặt khoảng cách trên nội bộ của phần tử.