Mục lục nội dung
margin
Chuẩn bị
Tạo file HTML và CSS có cấu trúc thư mục và nội dung như sau :
Cấu trúc thư mục
- Html
index.html
-
css
- style.css
Click vào dấu [ + ] để xem cấu trúc .
HTML viết
Hiển thị trình duyệt khi chưa có CSS
Thành phần có sử dụng thuộc tính margin .
CSS
Để dễ hình dung thuộc tính margin, ta sẽ cho thành phần
* {
margin: 0;
padding: 0;
}
div {
border: 1px solid red;
}
p {
background: yellow;
width: 400px;
}
Hiển thị trình duyệt khi chưa sử dụng margin
Thành phần có sử dụng thuộc tính margin .
Download phần chuẩn bị sẵn sàng
margin-top
Cấu trúc:
margin-top: giá trị;
Ta thêm nội dung CSS tại thẻ đoạn code margin-top với giá trị 20 px :
* {
margin: 0;
padding: 0;
}
div {
border: 1px solid red;
}
p {
background: yellow;
margin-top: 20px;
width: 400px;
}
Hiển thị trình duyệt khi sử dụng margin-top: 20px;
Thành phần có sử dụng thuộc tính margin .
Phân tích:
Nhìn vào hiệu quả ta thấy : chiều cao hiện tại của thành phần vẫn không biến hóa, tuy nhiên thành phần đã di dời xuống bên dưới, cách đỉnh 20 px .
margin-right
Cấu trúc:
margin-right: giá trị;
Ta thêm nội dung CSS tại thẻ đoạn code margin-right với giá trị 20 px :
* {
margin: 0;
padding: 0;
}
div {
border: 1px solid red;
}
p {
background: yellow;
margin-right: 20px;
width: 400px;
}
Hiển thị trình duyệt khi sử dụng margin-right: 20px;
Thành phần có sử dụng thuộc tính margin .
Phân tích:
Nhìn vào kết quả ta thấy: chiều rộng hiện tại của thành phần không thay đổi, vẫn là là 400px như ban đầu, tuy nhiên bên ngoài phía bên phải thành phần đã được thêm một khoảng không gian 20px, nếu có thành phần nào nằm bên phải thì nó sẽ cách thành phần một khoảng cách 20 px .
margin-bottom
Cấu trúc:
margin-bottom: giá trị;
Ta thêm nội dung CSS tại thẻ đoạn code margin-bottom với giá trị 20 px :
* {
margin: 0;
padding: 0;
}
div {
border: 1px solid red;
}
p {
background: yellow;
margin-bottom: 20px;
width: 400px;
}
Hiển thị trình duyệt khi sử dụng margin-bottom: 20px;
Thành phần có sử dụng thuộc tính margin .
Phân tích:
Nhìn vào tác dụng ta thấy : chiều cao hiện tại của thành phần không đổi khác, tuy nhiên bên ngoài phía dưới thành phần đã được thêm khoảng chừng khoảng trống 20 px .
margin-left
Cấu trúc:
margin-left: giá trị;
Ta thêm nội dung CSS tại thẻ đoạn code margin-left với giá trị 20 px :
* {
margin: 0;
padding: 0;
}
div {
border: 1px solid red;
}
p {
background: yellow;
margin-left: 20px;
width: 400px;
}
Hiển thị trình duyệt khi sử dụng margin-left: 20px;
Thành phần có sử dụng thuộc tính margin .
Phân tích:
Nhìn vào hiệu quả ta thấy : chiều rộng hiện tại của thành phần không biến hóa, vẫn là 400 px, tuy nhiên thành phần đã địch chuyển về bên phải, cách bên ngoài phía bên trái trái một khoảng chừng khoảng trống 20 px .
margin với 4 giá trị
Cấu trúc:
margin: top right bottom left;
Đây là dạng kết hợp của 4 thuộc tính margin: margin-top, margin-right, margin-bottom và margin-left, trong đó:
- top: là giá trị của margin-top
- right: là giá trị của margin-right
- bottom: là giá trị của margin-bottom
- left: là giá trị của margin-left
Ta thêm nội dung CSS tại thẻ đoạn code margin với giá trị lần lượt là 20 px 30 px 40 px 20 px :
* {
margin: 0;
padding: 0;
}
div {
border: 1px solid red;
}
p {
background: yellow;
margin: 20px 30px 40px 20px;
width: 400px;
}
Hiển thị trình duyệt khi sử dụng margin: 20px 30px 40px 20px;
Thành phần có sử dụng thuộc tính margin .
Phân tích:
Nhìn vào tác dụng ta thấy : chiều rộng và chiều cao của thành phần vẫn không đổi khác, tuy nhiên thành phần hiện tại đã cách lề một khoảng chừng trên 20 px, phải 30 px, dưới 40 px trái 20 px .
margin với 3 giá trị
Cấu trúc:
margin: top [left right] bottom;
Đây là dạng phối hợp của 4 thuộc tính margin : margin-top, margin-right, margin-bottom và margin-left dưới dạng hiển thị 3 giá trị, tất cả chúng ta sử dụng dạng này trong trường hợp margin-left và margin-right có cùng giá trị, trong đó :
- top: là giá trị của margin-top
- [left right]: là giá trị chung của margin-left và margin-right
- bottom: là giá trị của margin-bottom
Ta thêm nội dung CSS tại thẻ đoạn code margin với giá trị lần lượt là 20 px 30 px 40 px :
* {
margin: 0;
padding: 0;
}
div {
border: 1px solid red;
}
p {
background: yellow;
margin: 20px 30px 40px;
width: 400px;
}
Hiển thị trình duyệt khi sử dụng margin: 20px 30px 40px;
Thành phần có sử dụng thuộc tính margin .
Phân tích:
Nhìn vào tác dụng ta thấy : chiều rộng và chiều cao hiện tại của thành phần không đổi khác, tuy nhiên thành phần hiện tại đã cách lề một khoảng chừng trên 20 px, trái và phải cách đều 30 px, dưới 40 px .
margin với 2 giá trị
Cấu trúc:
margin: [top bottom] [left right];
Đây là dạng phối hợp của 4 thuộc tính margin : margin-top, margin-right, margin-bottom và margin-left dưới dạng hiển thị 2 giá trị, tất cả chúng ta sử dụng dạng này trong trường hợp margin-left có cùng giá trị với margin-right, margin-top có cùng giá trị với margin-bottom, trong đó :
- [top bottom]: là giá trị chung của margin-top và margin-bottom
- [left right]: là giá trị chung của margin-left và margin-right
Ta thêm nội dung CSS tại thẻ đoạn code margin với giá trị lần lượt là 20 px 30 px :
* {
margin: 0;
padding: 0;
}
div {
border: 1px solid red;
}
p {
background: yellow;
margin: 20px 30px;
width: 400px;
}
Hiển thị trình duyệt khi sử dụng margin: 20px 30px;
Thành phần có sử dụng thuộc tính margin .
Phân tích:
Nhìn vào tác dụng ta thấy : chiều rộng và chiều cao hiện tại của thành phần vẫn không đổi khác, tuy nhiên thành phần hiện tại đã cách lề một khoảng chừng trên và dưới cách đều 20 px, trái và phải cách đều 30 px .
margin với 1 giá trị
Cấu trúc:
margin: [top left bottom right];
Đây là dạng tích hợp của 4 thuộc tính margin : margin-top, margin-right, margin-bottom và margin-left dưới dạng hiển thị 1 giá trị chung cho những thuộc tính của margin, tất cả chúng ta sử dụng dạng này trong trường hợp margin-top, margin-right, margin-left, margin-bottom có cùng giá trị, trong đó :
- [top left bottom right]: là giá trị chung của margin-top, margin-right, margin-left và margin-bottom
Ta thêm nội dung CSS tại thẻ đoạn code margin với giá trị là 30 px :
* {
margin: 0;
padding: 0;
}
div {
border: 1px solid red;
}
p {
background: yellow;
margin: 30px;
width: 400px;
}
Hiển thị trình duyệt khi sử dụng margin: 30px;
Thành phần có sử dụng thuộc tính margin .
Phân tích:
Nhìn vào hiệu quả ta thấy : chiều rộng và chiều cao hiện tại của thành phần vẫn không biến hóa, tuy nhiên thành phần hiện tại đã cách lề một khoảng chừng trên, phải, dưới, trái cách đều 30 px .
Kết hợp dạng tổng quát và dạng cơ bản
Cấu trúc:
margin: giá trị tổng quát;
margin-vị trí: giá trị;
Đây là dạng sử dụng dạng cơ bản sau khi đã sử dụng dạng tổng quát, mục tiêu muốn kiểm soát và điều chỉnh lại giá trị cơ bản nào đó, xem ví dụ sau đây để hiểu rõ hơn .
Ta thêm nội dung CSS tại thẻ đoạn code margin với giá trị là 20 px 30 px 40 px :
* {
margin: 0;
padding: 0;
}
div {
border: 1px solid red;
}
p {
background: yellow;
margin: 20px 30px 40px;
width: 400px;
}
Hiển thị trình duyệt khi sử dụng margin: 20px 30px 40px;
Thành phần có sử dụng thuộc tính margin .
Phân tích:
Bây giờ ta sẽ sử dụng thuộc tính cơ bản margin-left : 10 px ; để kiểm soát và điều chỉnh lại giá trị của margin-left :
* {
margin: 0;
padding: 0;
}
div {
border: 1px solid red;
}
p {
background: yellow;
margin: 20px 30px 40px;
margin-left: 10px;
width: 400px;
}
Hiển thị trình duyệt
Thành phần có sử dụng thuộc tính margin.
Phân tích:
Source: https://blogchiase247.net
Category: Hỏi Đáp
