Padding CSS là gì

Trong một trang web đôi lúc chúng ta thấy có những khoảng trống giữa các khối với nhau, nhưng mà họ lại không sử dụng tag
,... Những khoảng trống đó được tạo bằng CSS và cụ thể là sử dụng hai thuộc tính margin và padding.

1, Thuộc tính Margin.

-Thuộc tính margin trong CSS cho phép chúng ta tạo ra các khoảng cách từ thành phần được chọn ra phía bên ngoài của thành phần đó.

Thuộc tính này cho phép chúng ta điền vào từ 1 đến 4 giá trị với từng trường hợp như sau:

Thuộc tính margin với một giá trị

-Khi khai báo thuộc tính margin chứa một giá trị thìthành phần được chọn cách đều bốn phía trên - phải - dưới - trái.

VD: CSS cho thẻ div cách đều 4 phía 30px.

Xem Kết Quả

Thuộc tính margin với hai thuộc tính

-Khi khai báo thuộc tính margin với hai giá trị thì:

• Giá trị thứ nhất sẽ là cách trên và cách dưới.
• Giá trị thứ hai sẽ là cách trái và cáchphải.

Cú Pháp:

VD: CSS cho thẻ div cách trên dưới 20px, trái phải 30px.

Xem Kết Quả

Thuộc tính margin với ba giá trị

-Khi chúng ta khai báo thuộc tính margin với 3 giá trị kèm theo thì

• Giá trị thứ nhất là cách trên.
• Giá trị thứ hailà cách trái phải.
• Giá trị thứ balà cách dưới.

Cú Pháp:

VD: CSS cho thẻ div cách trên 20px, cách trái phải 30px, cách dưới 40px.

Xem Kết Quả

Thuộc tính margin với bốngiá trị

-Khi khai báo thuộc tính margin với bốn giá trị kèm theo thì:

• Giá trị thứ nhất sẽ là cách trên.
• Giá trị thứ hai sẽ là cách phải.
• Giá trị thứ basẽ là cách dưới.
• Giá trị thứ bốnsẽ là cách trái.

Cú Pháp:

VD: CSS cho thẻ div các trên 5px, phải 10px, dưới 15px, trái 20px.

Xem Kết Quả

Margin theo từng chiều

-Ngoài các thuộc tính như trên thì chúng ta hoàn toàn có thể CSS margin theo từng chiều với các thuộc tính như sau:

VD: CSS cho thẻ div cách trên 15px.

Xem Kết Quả

2, Thuộc tính padding.

-Thuộc tính padding trong CSS có tác dụng căn chỉnhnội dung hiển thị trong một thành phần so với viền của thành phần đó.

-Thuộc tính padding cũng cho phép chúng ta điền vào từ 1 đến 4 giá trị như thuộc tính margin. Và vị trí cách của nó cũng tương ứng như thuộc tính margin nên mình sẽ nói nữa.

CSS từng thành phần.

-Cũng giống như margin thì padding cũng cung cấp cho chúng ta các thuộc tính cách tương tự với từng phía.

VD: CSS cho nọi dung trong thẻ div cáchtrên 15px.

Xem Kết Quả

3, Chú ý.

-Đối với 2 thuộc tính margin và padding thì chúng ta có thể sử dụng các đơn vị đotrong CSS [px,%,in,em,...], hoặc sử dụng giá trị auto khi muốn nó tự căn chỉnh.

VD: CSS cho thẻ div cách đều 2 bên.

Xem Kết Quả

4, Lời kết.

-Như vậy mình đã giới thiệu xong đến mọi người cơ bản về nguyên lý hoạt động của hai thuộc tính margin và padding trong CSS rồi. Các bạn chú ý phần này, vì sau này sẽ phải sử dụng nó thường xuyên đó.

Vũ Thanh Tài

• Bài 39: Cache trong Laravel 8

  6 tháng trước 1 Comments
• PHP Swoole là gì? nó có gì mạnh?

  7 tháng trước 0 Comment
• Cài đặt SSL trên local sử dụng mkcert

  7 tháng trước 4 Comments
• Bài 38: Eloquent ORM Serialize trong Laravel 8

  8 tháng trước 0 Comment