padding không được cho phép.Css padding
Thuộc tính CSS padding được sử dụng để tạo không gian xung quanh nội dung của phần tử HTML, padding nằm ở giữa đường viền border và nội dung.
Phần tử này có padding 70px.
CSS Padding
Thuộc tính CSS padding được sử dụng để tạo không gian xung quanh nội dung của phần tử HTML, padding nằm ở giữa đường viền border và nội dung.
Với CSS, chúng ta có toàn quyền kiểm soát phần đệm. Thuộc tính padding có các giá trị thiết lập phần đệm cho mỗi bên của một phần tử, bao gồm các vùng không gian trên cùng, bên phải, dưới cùng và bên trái.
Các thuộc tính CSS padding để chỉ định phần đệm cho mỗi bên của phần tử như sau:
padding-toppadding-rightpadding-bottompadding-left
Thuộc tính padding có các giá trị như:
- length - Chỉ định một khoảng đệm bằng px, pt, cm, v.v.
- % - Chỉ định một khoảng đệm tính bằng% chiều rộng của phần tử chứa
- inherit - Chỉ định phần đệm được kế thừa từ phần tử cha
Ví dụ
<style> div { border: 1px solid black; background-color: lightblue; padding-top: 50px; padding-right: 30px; padding-bottom: 50px; padding-left: 80px; } </style>
CSS Padding - Viết tắt
Để rút ngắn mã, chúng ta có thể chỉ định tất cả các thuộc tính padding vào trong một thuộc tính padding.
Giả sử chúng ta có các thuộc tính padding riêng lẻ như sau:
padding-toppadding-rightpadding-bottompadding-left
Chúng ta sẽ viết lại thuộc tính CSS với bốn giá trị như trên.
Nếu thuộc tính padding có bốn giá trị:
- padding: 25px 50px 75px 100px;
- padding-top là 25px
- padding-right là 50px
- padding-bottom là 75px
- padding-left là 100px
Ví dụ
<style> div { border: 1px solid black; padding: 25px 50px 75px 100px; background-color: lightblue; } </style>
Nếu thuộc tính padding có ba giá trị:
- padding: 25px 50px 75px;
- padding-top là 25px
- padding-right và padding-left là 50px
- padding-bottom là 75px
Ví dụ
<style> div { border: 1px solid black; padding: 25px 50px 75px; background-color: lightblue; } </style>
Nếu thuộc tính padding có hai giá trị:
- padding: 25px 50px;
- padding-top và padding-bottom là 25px
- padding-right và padding-left là 50px
Ví dụ
<style> div { border: 1px solid black; padding: 25px 50px; background-color: lightblue; } </style>
Nếu thuộc tính padding có một giá trị:
- padding: 25px;
- padding-top, padding-bottom, padding-left, padding-right là 25px
Ví dụ
<style> div { border: 1px solid black; padding: 25px; background-color: lightblue; } </style>
CSS Padding và Width
Thuộc tính CSS width chỉ định chiều rộng của vùng nội dung của phần tử. Vùng nội dung là phần bên trong phần đệm padding, đường viền border và phần lề margin của một phần tử.
Vì vậy, nếu một phần tử có chiều rộng được xác định ban đầu, phần đệm padding được thêm vào phần tử sẽ làm gia tăng tổng chiều rộng của phần tử đó. Đây thường là một kết quả không mong muốn.
Ví dụ: phần tử <div> có chiều rộng là 300px. Tuy nhiên, chiều rộng thực tế của phần tử <div> sẽ là 350px (300px + 25px đệm bên trái + 25px đệm phải)
div.ex2 { width: 300px; padding: 25px; background-color: lightblue; }
Để giữ chiều rộng ở giá trị ban đầu là 300px, tính cả giá trị của padding, chúng ta có thể sử dụng thuộc tính box-sizing. Điều này sẽ làm cho phần tử duy trì chiều rộng thực của nó. Nếu chúng ta tăng khoảng đệm padding lên, thì không gian nội dung có sẵn sẽ giảm xuống.
Ví dụ: Sử dụng thuộc tính box-sizing để giữ chiều rộng ở 300px, bất kể số lượng padding
div.ex2 { width: 300px; padding: 25px; background-color: lightblue; box-sizing:border-box; }