Khóa học CSS - Bài 05 - Canh lề ngoài MARGIN

Quay về mục lục TỰ HỌC CSS

Với CSS ta có thể canh lề đối tượng bằng cách tạo khoảng cách bên ngoài đối tượng đối với phần tử chứa nó, vượt ra khỏi đường viền.

Để hiểu thêm về vị trí các đối tượng trong trang web các  bạn xem thêm bài 08 – Mô hình hộp

1. Các hướng canh lề

Có 04 hướng khoảng cách:

·         margin-top

·         margin-right

·         margin-bottom

·         margin-left

Các thuộc tính canh lề có thể có các dạng giá trị sau:

·         auto – trình duyệt sẽ ấn định thông số

·         px (pixel)

·         % bề rộng của phần tử chứa nó.

·         inherit – thừa kế từ đối tượng chứa nó.

Ví dụ:

p {
    border: 5px solid green;

    margin-top: 100px;
    margin-bottom: 100px;
    margin-right: 150px;
    margin-left: 80px;
}

2. Viết tắt

a.       Trường hợp có 04 giá trị:

margin: top right bottom left

Ví dụ:

p {
    border: 5px solid green;

    margin: 100px 100px 150px 80px;
}

b.      Trường hợp có 03 giá trị

Giá trị lần lượt sẽ là:

·         Top

·         Right-left

·         Bottom

Ví dụ:

p{
    border: 5px solid green;

    margin: 100px 100px 150px;
}

c.       Trường hợp có 02 giá trị

                                                   i.      Top-bottom

                                                 ii.      Right-left

Ví dụ:

p {
    border: 5px solid green;

    margin: 100px 80px;
}

d.      Trường hợp có 01 giá trị

Cả 04 hướng sẽ đều được gán 01 giá trị.

Ví dụ:

p {
    border: 5px solid green;

    margin: 20px;
}

Chú ý: Các đối tượng cùng vật chứa nếu đặt gần nhau sẽ tự động cộng hưởng các giá trị margin.

3. Giá trị auto

Thuộc tính margin có giá trị auto sẽ tự động canh lề giữa theo chiều ngang trong đối tượng chứa nó.

Chú ý phải có thêm thuộc tính width điều này mới xảy ra.

Ví dụ:

p {
    width: 300px;
    margin: auto;
    border: 1px solid red;
}

4. Giá trị thừa hưởng

Đối tượng có giá trị này sẽ thừa hưởng giá trị margin từ đối tượng chứa nó.

Ví dụ:

p {
    margin: inherit;
    border: 1px solid green;
}

div {
    margin-left: 100px;
    border: 1px solid red;
}

và các thẻ HTML trong thẻ body

<div>

<p>Đối tượng thừa hưởng margin</p>

</div>

5. Nhập chung giá trị - Margin collapse

Giá trị top và bottom của thuộc tính margin đôi khi không cộng hưởng theo quy luật khi 02 phần tử đặt cạnh nhau mà có thể được gán bằng giá trị lớn nhất.

Điều này không xảy ra với giá trị right-left.

Ta xét ví dụ sau:

h1 {
    margin: 0 0 50px 0;
}

h2 {
    margin: 20px 0 0 0;
}

và các thẻ HTML trong thẻ body:

<h1>Tiêu đề 1</h1>

<h2>Tiêu đề 2</h2>

Theo lý thuyết, khoảng cách giữa h1 và h2 sẽ là 50px + 20px (do h1 margin-bottom:50px và h2 margin-top:20px) nhưng thực tế ở đây trình duyệt sẽ chọn con số lớn nhất là 50px làm khoảng cách giữa chúng.

Bây giờ bạn thử sửa con số 20px trong phần h2 thành 0px sẽ không thấy gì thay đổi xảy ra.

Đó gọi là hiện tượng margin collapse.

Nếu vẫn chưa hiểu các bạn xem thêm video clip sau:

Quay về mục lục TỰ HỌC CSS

• Đăng ký kênh tại đây: https://www.youtube.com/channel/UCXjV9sLt3WgamL7vofLofow?sub_confirmation=1
• Trang fan page: https://www.facebook.com/lophocvitinhcom
• Trang web: http://lophocvitinh.com

Tác giả: #drM

Nguồn : Sưu Tầm