Lề W3.CSS
Lớp w3-margin thêm lề 16px cho tất cả các cạnh của một phần tử.
Các lớp ký quỹ W3.CSS
W3.CSS cung cấp các lớp ký quỹ sau:
Lớp học | Định nghĩa |
---|---|
lề w3 | Thêm lề 16px cho tất cả các cạnh của phần tử |
w3-lề-top | Thêm lề trên 16px vào một phần tử |
w3-lề-phải | Thêm lề phải 16px vào một phần tử |
w3-lề-đáy | Thêm lề dưới 16px vào một phần tử |
w3-lề-trái | Thêm lề trái 16px vào một phần tử |
phần w3 | Thêm lề trên và dưới 16px vào một phần tử |
Lề
Lớp w3-margin thêm lề 16px cho tất cả các cạnh của một phần tử:
Lớp w3-margin thêm lề 16px cho tất cả các cạnh của một phần tử.
Ví dụ
<div class="w3-container w3-margin">
<p>I have 16px margin on all sides.</p>
</div>
Hãy tự mình thử »Ký quỹ trên cùng
Lớp w3-margin-top thêm lề trên 16px vào một phần tử:
Lớp w3-margin-top thêm lề trên 16px cho một phần tử.
Ví dụ
<div class="w3-container w3-margin-top">
<p>I have 16px margin on the top.</p>
</div>
Hãy tự mình thử » Ký quỹ đáy
Lớp w3-margin-bottom thêm lề dưới 16px cho một phần tử:
Lớp w3-margin-bottom thêm lề dưới 16px cho một phần tử.
Ví dụ
<div class="w3-container w3-margin-bottom">
<p>I have 16px margin on the bottom.</p>
</div>
Hãy tự mình thử »Lề trái
Lớp w3-margin-left thêm lề trái 16px vào một phần tử:
Lớp w3-margin-left thêm lề trái 16px cho một phần tử.
Ví dụ
<div class="w3-container w3-margin-left">
<p>I have 16px margin the left.</p>
</div>
Hãy tự mình thử »Lề phải
Lớp w3-margin-right thêm lề phải 16px vào một phần tử:
Lớp w3-margin-right thêm lề phải 16px vào một phần tử.
Ví dụ
<div class="w3-container w3-margin-right">
<p>I have 16px margin the right.</p>
</div>
Hãy tự mình thử »Phần
Nhiều phần tử HTML không có lề trên hoặc dưới mặc định. Các phần tử như vậy sẽ hiển thị không có lề giữa chúng:
Tôi buồn
Tôi là xanh
Lớp w3-section có thể được sử dụng để phân tách các phần tử.
Nó thêm lề trên và dưới 16px cho bất kỳ phần tử HTML nào:
Tôi buồn
Tôi là xanh
Ví dụ
<div class="w3-container w3-section w3-blue">
<h1>I am
Blue</h1>
</div>
<div class="w3-container
w3-section
w3-green">
<h1>I am Green</h1>
</div>
Hãy tự mình thử »