Cách Thiết Lập Vùng đệm (padding) Cho Phần Tử Trong CSS

Trang chủ » Trong Css để Thiết Lập Vùng đệm Cho Mô Hình Hộp Ta Dùng Thuộc Tính » Cách Thiết Lập Vùng đệm (padding) Cho Phần Tử Trong CSS

Có thể bạn quan tâm

  • HTML
  • CSS
  • JAVASCRIPT
  • JQUERY
  • MYSQL
  • PHP
CSS Bài 09: Tthiết lập vùng đệm cho phần tử Cách thiết lập vùng đệm cho một phần tử HTML

1) Vùng đệm là gì !?

- Trong Bài 06 thì tôi đã có giới thiệu sơ qua cho các bạn biết vùng đệm là gì rồi !

- Vùng đệm (padding) là khoảng cách nằm giữa đường viền của phần tử & nội dung của phần tử.

2) Cách thiết lập vùng đệm cho phần tử

- Để thiết lập vùng đệm cho một phần tử HTML thì chúng ta cần phải thiết lập thuộc tính padding cho phần tử đó với cú pháp như sau:

padding: value;

- Trong đó, value là khoảng cách vùng đệm từ đường viền đến nội dung của phần tử, nó có thể được xác định dựa theo một trong ba loại giá trị:

length

- Chỉ định khoảng cách vùng đệm dựa theo một giá trị cụ thể, giá trị này có thể được xác định dựa theo các loại đơn vị như: px, em, cm, . . . .

 Xem ví dụ
%

- Chỉ định khoảng cách vùng đệm dựa theo tỷ lệ phần trăm chiều rộng phần nội dung của phần tử cha của nó.

- Ví dụ: Chúng ta có phần tử A là cha của phần tử B, chiều rộng phần nội dung của phần tử A là 200px.

  • Nếu ta thiết lập thuộc tính padding cho phần tử B với giá trị 50% thì vùng đệm của phần tử B sẽ có khoảng cách là 100px.
  • Nếu ta thiết lập thuộc tính padding cho phần tử B với giá trị 20% thì vùng đệm của phần tử B sẽ có khoảng cách là 40px.
  • . . . .
 Xem ví dụ
inherit

- Kế thừa giá trị thuộc tính padding từ phần tử cha của nó.

 Xem ví dụ

3) Cách thiết lập vùng đệm ở riêng từng phía

- Sau khi tìm hiểu xong phần hướng dẫn ở trên thì chắc các bạn cũng đã thấy: "khi chúng ta thiết lập thuộc tính padding cho một phần tử HTML thì mặc định vùng đệm nằm ở cả bốn phía của phần tử sẽ có chung một khoảng cách"

- Tuy nhiên, không phải lúc nào chúng ta cũng muốn như thế, mà đôi khi lại muốn vùng đệm ở mỗi phía của phần tử sẽ có một khoảng cách khác nhau, điển hình như phần tử bên phải có:

  • Vùng đệm phía trên là 50 pixel.
  • Vùng đệm bên phải là 80 pixel.
  • Vùng đệm phía dưới là 250 pixel.
  • Vùng đệm bên trái là 25 pixel.

- Và để làm được điều đó thì chúng ta có hai cách cơ bản như sau:

  • Cách 1: Thiết lập nhiều giá trị cho thuộc tính padding.
  • Cách 2: Thêm "tên vị trí" vào phía sau thuộc tính padding.
 LẬP TRÌNH WEB

- Tuy nhiên, trước khi đi vào tìm hiểu chi tiết hai cách trên thì các bạn cần phải nắm rõ tên từng vị trí của vùng đệm (bên dưới là ảnh minh họa từng vị trí của vùng đệm & tên của chúng)

topbottomleftright

3.1) Thiết lập nhiều giá trị cho thuộc tính padding

Cú pháp 1: padding: value1 value2 value3 value4;

- Vùng đệm phía trên (top) sẽ có khoảng cách là value1.

- Vùng đệm bên phải (right) sẽ có khoảng cách là value2.

- Vùng đệm phía dưới (bottom) sẽ có khoảng cách là value3.

- Vùng đệm bên trái (left) sẽ có khoảng cách là value4.

Xem ví dụ Cú pháp 2: padding: value1 value2 value3;

- Vùng đệm phía trên (top) sẽ có khoảng cách là value1.

- Vùng đệm bên trái (left) & bên phải (right) sẽ có khoảng cách là value2.

- Vùng đệm phía dưới (bottom) sẽ có khoảng cách là value3.

Xem ví dụ Cú pháp 3: padding: value1 value2;

- Vùng đệm phía trên (top) & phía dưới (bottom) sẽ có khoảng cách là value1.

- Vùng đệm bên trái (left) & bên phải (right) sẽ có khoảng cách là value2.

Xem ví dụ

3.2) Thêm "tên vị trí" vào phía sau thuộc tính padding

- Để thiết lập vùng đệm ở riêng từng phía cho phần tử bằng cách thêm tên vị trí vào phía sau thuộc tính padding thì chúng ta sử dụng cú pháp như sau:

padding-tênvịtrí: value; Ví dụ: <!DOCTYPE html> <html> <head> <title>Xem ví dụ</title> <style type="text/css"> div{ display:inline-block; border:5px solid green; padding-top:25px; padding-right:300px; padding-bottom:100px; padding-left:50px; } </style> </head> <body> <div>LẬP TRÌNH WEB</div> <p>- Vùng đệm phía trên là 25 pixel</p> <p>- Vùng đệm bên phải là 300 pixel</p> <p>- Vùng đệm phía dưới là 100 pixel</p> <p>- Vùng đệm bên trái là 50 pixel</p> </body> </html> Xem ví dụ Tổng quan về CSS Làm thế nào để định dạng cho một phần tử ? Những kiến thức cơ bản trong việc viết mã CSS Xác định màu sắc (color) trong CSS Cách xác định bộ chọn (selector) của phần tử Cấu trúc phần tử trong CSS Tạo đường viền (border) cho phần tử Đường viền hình ảnh Thiết lập vùng đệm (padding) cho phần tử Xác định khoảng cách lề (margin) của phần tử Màu nền (background color) Kích thước phần tử Hình nền (background image) Thiết lập độ cong (radius) cho các góc của phần tử Tạo cái bóng (shadow) cho phần tử Các thuộc tính định dạng DANH SÁCH Các thuộc tính định dạng VĂN BẢN Bộ chọn dựa trên quan hệ huyết thống Cách xác định bộ chọn trong một số trường hợp đặc biệt Bộ chọn của các “thành phần” bên trong phần tử Cách định dạng cho bảng (table) bằng CSS Thuộc tính box-sizing trong CSS Các loại dấu trích dẫn (quote) được hỗ trợ trong CSS Chia văn bản thành nhiều cột Tạo một vài hiệu ứng đơn giản cho hình ảnh Chỉnh độ trong suốt của phần tử Tạo thanh cuộn (scroll) cho phần tử Xác định kiểu hiển thị (display) của phần tử Thiết lập vị trí cho phần tử Hiệu ứng chuyển động Cách sử dụng nhóm thuộc tính Transition Định dạng cho Liên kết Thuộc tính Float & Clear trong CSS Độ ưu tiên hiển thị là gì ?

Từ khóa » Trong Css để Thiết Lập Vùng đệm Cho Mô Hình Hộp Ta Dùng Thuộc Tính