thuộc tính margin và padding trong css là một trong những từ khóa được search nhiều nhất trên google về chủ đề thuộc tính margin và padding trong css. Trong bài viết này, xaydungweb.vn sẽ viết bài Hướng dẫn sử dụng thuộc tính margin và padding trong css mới nhất 2020
Hướng dẫn sử dụng thuộc tính margin và padding trong css mới nhất 2020
Padding và Margin là hai tính chất thường được sử dụng trong CSS. bên cạnh đó rất nhiều bạn vẫn không phân biệt được sự khác nhau giữa hai tính chất này. Để hiểu rõ được sự khác biệt thì bạn cần nắm vững được khái niệm cần thiết trong CSS là box model.
Box Model
Trên trang HTML, mỗi phần tử của trang được đại diện bởi một hình chữ nhật. Trong CSS các ảnh chữ nhật này được xem như một chiếc hộp và thuật ngữ box model được sử dụng để chỉ các hộp này:
CSS Padding
Padding (khoảng đệm) là thuộc tính được sử dụng để tạo khoảng trống tính từ đường viền của phần tử cho tới nội dung phần tử. gợi ý nếu bạn có một đoạn văn bản và phần tử tương ứng với đoạn văn bản là p, văn bản có click thức là 13px và khoảng đệm trên dưới là 2px và phải trái là 3px sử dụng luật CSS giống như sau:
p font-size: 13px;padding: 2px3px2px3px;
Lúc này thì tổng chiều cao của phần tử tính tới đường viền lúc này sẽ là 13px + 2px (trên) + 2px (dưới) = 17px.
hiển nhiên bạn cũng hoàn toàn đủ sức chỉ dùng khoảng đệm trên (padding-top) hoặc tương tự chỉ sử dụng khoảng đệm dưới (padding-bottom), khoảng đệm trái (padding-left) và khoảng đệm phải (padding-right):
p font-size: 13px;padding-top: 2px;padding-bottom: 2px;
tính chất height của CSS sử dụng để xác định chiều cao của phần tử gồm có cả khoảng đềm của phần tử (hay tính đến đường viền)
CSS Margin
Margin (lề) là tính chất được dùng để tạo khoảng trống tính từ đường viền của phần tử ra phía ngoài. luôn luôn sử dụng gợi ý trên nếu bạn tạo lề trên và lề dưới của phần tử là 2px và lề phải và lề trái là 3px luật CSS như sau:
p font-size: 13px;padding: 2px3px;margin: 2px3px;
Lúc này phần tử luôn luôn có chiều cao tổng cộng là 17px bên cạnh đó sẽ có thêm một khoảng trống là 2px với các phần tử phía trước nó, 3px với các phần tử phía dưới nó, 3px cho các phần tử bên trái và bên phải.
Nguồn: https://www.codehub.vn/
