Ví Dụ Về Thuộc Tính Margin - Học Web Chuẩn

Trang chủ » Căn Lề 2 Bên Html » Ví Dụ Về Thuộc Tính Margin - Học Web Chuẩn

Có thể bạn quan tâm

Ví dụ về thuộc tính margin
  • Trang chủ
  • Tham khảo
  • CSS
  • Ví dụ về thuộc tính margin

Thuộc tính margin-top

Thuộc tính margin-top : canh lề bên trên cho thành phần.

<html> <head> <style type="text/css"> div { border: 1px solid red; } p { background: #00CC00; margin-top: 10px; } </style> </head> <body> <div> <p>margin top</p> </div> </body> </html>

margin top

Thuộc tính margin-right

Thuộc tính margin-right : canh lề bên phải cho thành phần.

<html> <head> <style type="text/css"> div { border: 1px solid red; } p { background: #00CC00; margin-right: 10px; } </style> </head> <body> <div> <p>margin right</p> </div> </body> </html>

margin right

Thuộc tính margin-bottom

Thuộc tính margin-bottom : canh lề bên dưới cho thành phần.

<html> <head> <style type="text/css"> div { border: 1px solid red; } p { background: #00CC00; margin-bottom: 10px; } </style> </head> <body> <div> <p>margin bottom</p> </div> </body> </html>

margin bottom

Thuộc tính margin-left

Thuộc tính margin-left : canh lề bên trái cho thành phần.

<html> <head> <style type="text/css"> div { border: 1px solid red; } p { background: #00CC00; margin-left: 10px; } </style> </head> <body> <div> <p>margin left</p> </div> </body> </html>

margin left

Thuộc tính margin

Thuộc tính margin : canh lề cho thành phần, tổng hợp các thuộc tính margin-top, margin-right, margin-bottom, margin-left.

margin với giá trị 1 thành phần

<html> <head> <style type="text/css"> div { border: 1px solid red; } p { background: #00CC00; margin: 10px; } </style> </head> <body> <div> <p>margin 1 thành phần</p> </div> </body> </html>

margin 1 thành phần

Trong đó: margin-top: 10px; margin-right: 10px; margin-bottom: 10px; margin-left: 10px;

margin với giá trị 2 thành phần

<html> <head> <style type="text/css"> div { border: 1px solid red; } p { background: #00CC00; margin: 10px 5px; } </style> </head> <body> <div> <p>margin 2 thành phần</p> </div> </body> </html>

margin 2 thành phần

Trong đó: margin-top: 10px; margin-bottom: 10px; margin-left: 5px; margin-right: 5px;

margin với giá trị 3 thành phần

<html> <head> <style type="text/css"> div { border: 1px solid red; } p { background: #00CC00; margin: 5px 10px 0; } </style> </head> <body> <div> <p>margin 3 thành phần</p> </div> </body> </html>

margin 3 thành phần

Trong đó: margin-top: 5px; margin-left: 10px; margin-right: 10px; margin-bottom: 0px;

margin với giá trị 4 thành phần

<html> <head> <style type="text/css"> div { border: 1px solid red; } p { background: #00CC00; margin: 5px 10px 10px 20px; } </style> </head> <body> <div> <p>margin 4 thành phần</p> </div> </body> </html>

margin 4 thành phần

Trong đó: margin-top: 5px; margin-right: 10px; margin-bottom: 10px; margin-left: 20px;

Ví dụ thuộc tính margin

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left
  • margin

Từ khóa » Căn Lề 2 Bên Html