Danh Mục Bài Viết
Tiếp theo chủ đề học nhanh Css cùng MinaCode. Bài viết này mình sẽ đề cập đến khái niệm Margin cũng như các thuộc tính của nó như margin-top, margin-right, margin-bottom, margin-left cũng như các value auto, inherit. Nào Let's go thôi.
Thuộc tính margin trong Css được sử dụng để tạo không gian xung quanh các phần tử, bên ngoài bất kỳ đường viền được xác định nào.
Với Css, bạn có thể tạo khoảng cách từ lề cho mỗi đường viền của thẻ (trên, phải, dưới và trái).
Các value có thể gán cho thuộc tính này là:
* value có thể có giá trị âm
p {
margin-top: 100px;
margin-bottom: 90px;
margin-right: 150px;
margin-left: 80px;
}Chúng ta hoàn toàn có thể viết gọn lại với 4 giá trị như sau:
p {
margin: 100px 90px 150px 80px;
}Nếu chỉ có 3 giá trị:
p {
margin: 100px 90px 150px;
}Có nghĩa là: lề trên là 100px; lề phải và trái là 90px; lề dưới là 150px
Nếu chỉ có 2 giá trị:
p {
margin: 100px 90px;
}Có nghĩa là: lề phải và trái là 90px; lề trên và dưới là 100px
Nếu chỉ có 1 giá trị:
p {
margin: 100px;
}Có nghĩa là: tất cả bốn lề đều là 100px
Giá trị Auto: Bạn có thể đặt thuộc tính lề auto để căn giữa phần tử theo chiều ngang trong vùng chứa của nó. Phần tử sau đó sẽ chiếm chiều rộng được chỉ định và khoảng trống còn lại sẽ được chia đều cho lề trái và lề phải. (Giá trị này chúng ta hay dùng để căn giữa một container nhé)
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
margin: auto;
border: 1px solid red;
}
</style>
</head>
<body>
<h2>Minacode|margin: auto</h2>
<div>
Container
</div>
</body>
</html>Ta có:
Giá trị Inherit: Giá trị này cho phép kế thừa margin từ phần tử cha:
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid red;
margin-left: 100px;
}
p.ex1 {
margin-left: inherit;
}
</style>
</head>
<body>
<h2>Minacode|Inherit value</h2>
<div>
<p class="ex1">Kênh tự học lập trình miễn phí.</p>
</div>
</body>
</html>Trong ví dụ trên mình để thẻ div bọc ngoài thẻ p có margin-left là 100px. Còn bản thân thẻ p có margin-left: inherit. Điều này có nghĩa là thẻ p sẽ kế thừa giá trị margin-left của thẻ bọc ngoài(thẻ cha) là 100px
Ta có:
.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)
