[Học CSS] Bài 12: Làm việc với margin trong CSS

Trong bài này chúng ta sẽ tìm hiểu cách sử dụng thuộc tính margin, một thuộc tính gần giống với padding và cũng được sử dụng rất thường xuyên.

Thuộc tính margin dùng để làm gì ?

Nếu như thuộc tính padding thiết lập khoảng cách giữa nội dung văn bản bên trong khung với viền khung  (border) thì margin sẽ thiết lập khoảng cách giữa 02 cái khung với nhau.

Các bạn có hình dung được không nhỉ ? nếu chưa hình dung ra thì xem hình ảnh này nhé !

Margin va padding trong CSS

Margin va padding trong CSS

Sử dụng margin trong CSS

Thì tương tự như đối với padding, để sử dụng thuộc tính margin các bạn dùng cú pháp:

  • margin: kích thước; (ví dụ margin: 10px;)
  • margin-left: kích thước; (ví dụ margin-left: 5px; khoảng cách đến phần tử bên trái là 5px ). Tương tự như vậy chúng ta có margin-right (cách bên phải), margin-top (trên), margin-bottom (dưới).

Ví dụ sau đây mình tạo 2 cái khung border chứa 2 đoạn văn bản, bên ngoài khung lại có một cái khung lớn bao hết 02 cái khung nhỏ. Để xem chúng như thế nào thì bạn copy vào Codepen mà xem nhé !

<html lang="vi">
    <head>
        <meta charset="utf-8" />
        <title>Tiêu đề webiste</title>
        <style type="text/css">
            body {
            text-align: center;
            border: solid black 10px;
            width: 600px;
            }
            #khung-so-01 {
            background: green;
            border: solid yellow 2px;
            color: #fff;
            padding: 30px;
            margin:80px;
            }
            #khung-so-02 {
            background: yellow;
            border: solid green 2px;
            color: blue;
            padding: 30px;
            margin:10px;
            }                          
        </style>
    </head>
    <body>
        <div id="khung-so-01">
            Nội dung trong khung số 01
        </div>
        <div id="khung-so-02">
            Nội dung trong khung số 02
        </div>
    </body>
</html>

Các bạn thấy rằng giá trị margin sẽ giúp thiết lập khoảng cách từ viền khung đến tất cả các khung mà nó tiếp xúc, ở đây ví dụ chọn thằng khung số 02 có margin là 10px thì có nghĩa là khoảng cách giữa nó đến tất cả các khung mà nó tiếp xúc đều là 10px. Tương tự như vậy, các bạn thay giá trị khác vào để xem sự thay đổi nhé !

Lưu ý là trong ví dụ này, thằng khung số 01 nó đã margin xung quanh 30px nên khoảng cách giữa nó với thằng khung số 02 sẽ là 10px + 30px = 40px nhé !

Oke, bài này nội dung cũng khá đơn giản đúng không nào ? Mình nhắc lại là nó gần giống với padding nhưng margin thì nó áp dụng cho các phần tử bên ngoài khung, còn padding nó áp dụng cho phần tử bên trong khung. Padding hướng nội, margin hướng ngoại.

Bài học trước đó và tiếp theo

4/5 - (1 vote)




Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
Ưu đãi Hosting, VPS lên đến 80% và tặng bộ theme, plugin bản quyền hơn 1.600$XEM CHI TIẾT
+