Nội dung bài viết
Padding trong css
Padding có nghĩa là vùng đệm được thêm vào
<style>
.box {
width: 60px;
height: 60px;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
.box1 {
background-color: #333;
}
.box2 {
background-color: orange;
}
.box3 {
background-color: firebrick;
}
</style>
</head>
<body>
<div class="box box1">Box 1</div>
<div class="box box2">Box 2</div>
<div class="box box3">Box 3</div>
</body>
Padding có 4 hướng là trên, phải, dưới, trái (đi theo chiều kim đồng hồ) nên khi thay đổi giá trị padding có thể thay đổi theo 4 hướng
.box3 {
background-color: firebrick;
padding-top: 10px;
padding-right: 12px;
padding-bottom: 10px;
padding-left: 12px;
}Hoặc có thể viết gọn đoạn code trên là
.box3 {
background-color: firebrick;
padding: 10px 12px;
}
Nếu có 3 tham số trong padding: 10px 12px 8px thì có nghĩa trên là 10, trái phải là 12 và dưới là 8px
VD về ứng dung padding, có một nút ấn trước khi được padding vì không có vùng đệm nên nhìn nút ấn xấu, khi có padding thêm vùng đệm vào (padding: 8px 16px;) trông dễ nhìn hơn.
Border trong CSS
Border được ký hiệu là nét liền trong hình mô tả phía trên vì border được hiểu là lớp viền ở ngoài cùng ôm một element.
Border sẽ có một số các thuộc tính như: Độ dày của boder: border-width (sẽ có các chiều border-top-width, border-right-width, border-bottom-width,border-left-width) kiểu của boder: border-style, màu của boder: border-color
.box3 {
background-color: firebrick;
padding: 10px;
border-width: 10px;
border-style: solid;
border-color: #333;
}Cả border và padding đều làm tăng kích thước của element lên. Như đoạn code trên padding và border đều là 10 nghĩa là padding trái tăng 10, padding phải tăng 10, border trái tăng 10, border phải tăng 10 tức là tổng kích thước element sẽ tăng từ 60 thành 100
Lưu ý: trong box3 kiểu viền của boder mặc định sẽ là kiểu medium tức là tương ứng với có boder mặc định là 3px, nên dù chỉ để mình border-top-width là 10px, thì các chiều khác cũng được đặt mặc định 3px.
Nếu muốn bỏ mặc định này đi thì bắt buộc phải đặt các giá trị
border-top-width: 10px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;Kiểu viết gọn giá trị border: border: 10px solid #333;
Thuộc tính margin
Margin giúp giải quyết yêu cầu như kéo box3 cách box2 một khoảng 20px, hoặc kéo box1 cách lề ra 10px.
Margin không làm dày element như border và padding.
float: left thêm thuộc tính này nếu muốn cả 3 khối đều nằm trên 1 chiều ngang
Margin cũng có 4 phía trên, phải, dưới, trái. Nếu viết gọn chỉ cần viết margin: 10px là sẽ đẩy ra cả 4 phía 10px..nếu để 2 giá trị là trên dưới, trái phải. Nếu để 3 giá trị thì sẽ là trên, trái phải, dưới.
Thuộc tính box-sizing
Do Padding và border làm dày element lên, do đó khi thêm padding và border vào mà muốn kích thước của element không thay đổi thì chỉ có cách là giảm kích thước của element đi đúng bằng kích thước mà padding hoặc border làm tăng lên.
Nhưng nếu giảm như vậy thì thủ công và khó tính toán, do vậy có thể sử dụng thuộc tính box-sizing, chỉ cần ghi: box-sizing: border-box;
Khi đi sửa một website đã code rồi nếu muốn hủy đi box-sizing thì ghi box-sizing: unset;
1 thought on “Đệm viền và khoảng lề (padding, margin, border) trong CSS”