Bài 10: Margin & Padding

1. Thuộc tính margin

- Thuộc tính margin trong css dùng để canh lề cho cả trang web hay một thành phần web này với các thành phần web khác hay với viền trang.
Ví dụ: Canh lề cho 1 trang web

body {  
              margin-top:80px;  
              margin-bottom:40px;  
              margin-left:50px;  
              margin-right:30px; 
              border:1px dotted #FF0000 
      }

Hoặc gọn hơn chúng ta sẽ viết như sau:

body {
               margin:80px 30px 40px 50px;
               border:1px dotted #FF0000 
     }

Kết quả của ví dụ trên sẽ được mô hình hóa như sau:


Cú pháp:
margin: <margin-top> | <margin-right> | <margin-bottom> | <margin-left>
Hoặc:
margin:<value1>|< value2> – với value 1 là giá trị margin-top và margin-bottom và value2 là giá trị margin-left và margin-right.

2. Thuộc tính padding

- Là thuộc tính tạo khoảng cách giữa đường viền và nội dung.
Cú pháp: Tương tự margin.

Padding: <padding-top> | <padding-right> | <padding-bottom> | <padding-left>

Ví dụ: Nội dung và đường viền cách nhau 20px

<style>
p {
     border: 3px solid green;
     padding: 20px
  }
</style>
<p>Padding dùng để định vị trí giữa nội dung và đường viền</p>