CÁCH SỬ DỤNG BORDER, PADDING, MARGIN TRONG CSS ...

Trang chủ » Câu Lệnh Margin Trong Css » CÁCH SỬ DỤNG BORDER, PADDING, MARGIN TRONG CSS ...

Có thể bạn quan tâm

Để tạo đường viền nét liền cỡ 1px với màu đỏ cho thẻ p ta viết như sau:

p {border-style:solid; border-width:1px; border-color:black;}

Bạn có thể viết rút gọn bằng cách sau:

p {border: 1px solid black;} Bạn để ý thứ tự: kích cỡ, kiểu và màu sắc – ngoài ra là không có dấu chấm phẩy giữa chúng mà chỉ có dấu cách.

border1

Border-width:

Sử dụng thuộc tính border-width trong CSS giúp bạn thay đổi độ rộng của đường viền bao quanh một phần tử. Thuộc tính này có thể nhận một giá trị đo chiều dài với đơn vị là px, pt hoặc cm hoặc có thể là thin, medium hoặc thick.

<!DOCTYPE html> <html> <head> <style> p.one { border-style: solid; border-width: 5px; }

</style> </head> <body> <p class=”one”>Some text.</p>

</body> </html>

kq

B:Thuộc tính padding trong css

Thuộc tính padding khi sử dụng sẽ thêm khoảng không gian bên trong thành phần, khoảng không gian này sẽ được cộng dồn thêm vào chiều rộng hoặc chiều cao của thành phần (tùy vào hướng sử dụng padding).

Thuộc tính padding được chia ra làm 2 dạng:

  • Padding  gồm 4 thuộc tính:
    • padding top: thêm khoảng không gian bên trong hướng trên thành phần.
    • padding right: thêm khoảng không gian bên trong hướng bên phải thành phần.
    • padding-bottom: thêm khoảng không gian bên trong hướng dưới thành phần.
    • padding-left: thêm khoảng không gian bên trong hướng bên trái thành phần.

ngoài ra padding còn có dang:

padding với 4 giá trị:

padding với 3 giá trị:

padding với 2 giá trị:

padding với 1 giá trị:

ví dụ:

<!DOCTYPE html> <html> <head> <style> div { border: 1px solid black; background-color: lightblue; padding-top: 50px; padding-right: 30px; padding-bottom: 50px; padding-left: 80px; } </style> </head> <body> <h2>su dung padding</h2>

Day la padding du 4 thuoc tinh

</body> </html>

Kết quả:

kq1

C Margin:

Sử dụng sẽ thêm khoảng không gian bên ngoài thành phần, khoảng không gian này không cộng dồn thêm vào chiều rộng hoặc chiều cao của thành phần.

gồm 4 thuộc tính:

  • Thuộc tính margin: sử dụng thuộc tính này bạn có thể thiết lập tất cả style liên quan tới việc căn lề chỉ trong một khai báo CSS.
  • Thuộc tính margin-bottom căn lề dưới của một phần tử.
  • Thuộc tính margin-top căn lề trên của một phần tử.
  • Thuộc tính margin-left căn lề trái của một phần tử.
  • Thuộc tính margin-right căn lề phải của một phần tử.

vdu:

<!DOCTYPE html> <html> <head> <style> div { border: 1px solid black; margin: 100px 150px 100px 80px; background-color: lightblue; } </style> </head> <body>

<h2>tim hieu ve margin</h2>

Nhung muc can biet ve margin

</body> </html>

kq:

4.png

D. Hướng dẫn tạo 1 button sử dụng CSS:

Sử dung html:

Từ khóa » Câu Lệnh Margin Trong Css