CSS Margins

---

CSS Margins

Margins là phần ngoài tính từ border. Mỗi thẻ sẽ có phần margin default. Ta có thể xét margin cho thẻ, thì cũng giống border, margin cũng có top, right, bottom, left.

<style>
 p.myStyle1 {
  border:1px solid tomato;
  margin-left: 40px;
 }
</style>

<p class="myStyle1">Margin left 40px</p>

Margin left 40px

Ngoài ra ta cũng có:

margin-right
margin-top 
margin-bottom

Hoặc xét 4 cạnh bằng 40px

margin: 40px;

Hoặc ta xét margin từng cạnh bằng

margin: 10px 20px 30px 40px; /* top right bottom left */ 

Hoặc ta xét top/bottom left/right

margin: 10px 20px; /* top/bottom left/right */

Hoặc ta xét top left/right bottom

margin: 10px 20px 30px; /* top left/right bottom */ 

Hoặc ta muốn thẻ nằm chính giữa màn hình. Ta dùng như sau.

<style>
 p.myStyle2 {
  border:1px solid tomato;
  width: 300px;
  margin: 0 auto; /* top/bttom is 0px , left/right is auto */
 }
</style>

<p class="myStyle2">Margin auto</p>

Margin auto

Nếu ta xét margin bottom là 10px , còn thẻ p tiếp theo margin top là 50px thì margin không phải là 10px + 50px mà chỉ lấy phần margin lớn hơn là 50px. Cái này gọi là Margin collapse.

<style>
 p.myStyle3 {
  border:1px solid tomato;
  width: 300px;
  margin-bottom: 10px;
 }

 p.myStyle4 {
  border:1px solid tomato;
  width: 300px;
  margin-top: 50px;
 }

</style>

<p class="myStyle3">bottom: 10px</p>
<p class="myStyle4">top: 50px</p>

bottom: 10px

top: 50px

Như vậy ta đã tìm hiểu xong CSS Margins. ^_^