Danh Mục Bài Viết
Ok anh em, Tiếp theo chủ đề học nhanh Css với Minacode. Bài này mình sẽ nói về một khái niệm được sử dụng rất nhiều trong Css đó là Padding, các thuộc tính của nó. Đặc biệt là ý nghĩa của thuộc tính boz-sizing trong Css. Nào Let's go thôi!
Thuộc tính padding trong Css được sử dụng để tạo khoảng trống xung quanh nội dung của phần tử, bên trong bất kỳ border được xác định nào. Các bạn nhớ bên trong nhé. Nó khác với margin là bên ngoài đường border.
Css có các thuộc tính để chỉ định phần padding cho 4 bên của một phần tử:
Tất cả các thuộc tính padding có thể có các giá trị sau:
Lưu ý: Không cho phép giá trị âm.(Khác với Margin đúng không các bạn?)
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
background-color: lightblue;
padding-top: 50px;
padding-right: 30px;
padding-bottom: 100px;
padding-left: 80px;
}
</style>
</head>
<body>
<h2>Minacode|Padding</h2>
<div>Kênh học lập trình miễn phí.</div>
</body>
</html>Ta có:
Cũng giống như margin chúng ta có thể viết tắt inline cho padding nhé!
div {
padding: 25px 50px 75px 100px;
}Thuộc tính width trong Css chỉ định độ 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 border và nó bao gồm luôn cả phần padding. Vì vậy, nếu một phần tử có chiều rộng được chỉ định, phần padding được thêm vào phần tử đó sẽ được thêm vào 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ụ:
<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
width: 300px;
background-color: yellow;
}
div.ex2 {
width: 300px;
padding: 25px;
background-color: lightblue;
}
</style>
</head>
<body>
<h2>Minacode|Padding</h2>
<div class="ex1">Phần tử này được style rộng 300px.</div>
<br>
<div class="ex2">Phần tử này cũng được style rộng 300px tuy nhiện thực tế đang là 350px.</div>
</body>
</html>Ta có:
Vậy để xử lý tình huống này thì thuộc tính box-sizing ra đời.
Để giữ chiều rộng ở mức 300px như ví dụ trên, bạn có thể sử dụng thuộc tính box-sizing. Điều này khiến phần tử duy trì chiều rộng thực tế của nó; nếu bạn tăng khoảng padding, không gian nội dung có sẵn sẽ giảm thay vì nó giữ nguyên và mở rộng ra ngoài.
<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
width: 300px;
background-color: yellow;
}
div.ex2 {
width: 300px;
padding: 25px;
background-color: lightblue;
box-sizing: border-box;
}
</style>
</head>
<body>
<h2>Minacode|Padding</h2>
<div class="ex1">Phần tử này được style rộng 300px.</div>
<br>
<div class="ex2">Phần tử này cũng được style rộng 300px tuy nhiện thực tế đang là 350px.</div>
</body>
</html>Ta có:
Các bạn hiểu vai trò của thuộc tính box-sizing rồi chứ!
>>Còn tiếp nhé>>
.png)
.png)
-min.png)
Banker To Coder
Hi All,
Nguyên đây! MinaCode là website mình tạo ra với mong muốn chia sẻ chút kiến thức liên quan đến lập trình FullStack.
Ngôn ngữ lập trình chủ yếu được sử dụng là Htm, Css, Javascript, Php cùng một số thư viện như Jquery, Fontawesome... Phía Frontend và Farmework Laravel phía Backend.
Mình chưa bao giờ tham gia bất cứ một trường lớp nào về lập trình. Tất cả kiến thức mình chia sẻ đều là trên tình thần tự học. Do đó:
+ MinaCode phù hợp với những tay ngang, xem lập trình như là một kỹ năng bổ trợ trong công việc hay là một kênh kiếm thêm thu nhập từ những very mini projects.
+ MinaCode không phù hợp với những bạn đang được đào tạo bài bản, chính quy.
Mình tin rằng, Trong tương lai không xa. Lập trình sẽ trở nên một kỹ năng không thể thiếu đối với các bạn trẻ.
Cuối cùng thì Ngôn ngữ lập trình không quan trọng bằng Tư duy lập trình. Mình chúc các bạn sẽ có được những kiến thức bổ ích với MinaCode.
--Ngô Sỹ Nguyên--
.png)
