Margin và Padding điểm khác và giống nhau

0
327

Điểm khác nhau giữa margin và padding là gì ? Trong bài viết này chúng ta sẽ cùng nhau trả lời câu hỏi này, bởi vì ai khi mới học CSS cũng thấy mông lung với hai thuộc tính này. Chúng ta sẽ tìm hiểu điểm giống và khác giữa chúng.

margin và padding

Margin và Padding

Giống:

  1. Tạo khoảng cách giữa cách phần tử

Khác:

  1. margin tạo khoảng cách với phần tử so với lề
  2. padding tạo khoảng cách với phần tử so với đường viền border
  3. padding sẽ khiến kích thước vùng chứa phần tử thay đổi

Nếu không để thuộc tính border thì sẽ rất khó phân biệt.

Ok mình sẽ làm một ví dụ:

Ở trên thì mình sử dụng thêm thuộc tính display:inline-block, tác dụng của thuộc tính này là biến thẻ block thành thẻ inline rồi lại biến inline thành block. Thêm bớt thuộc tính này để thấy sự khác biệt, từ đó sẽ ngộ ra chân lý. Tự mình ngộ ra chân lý sẽ tốt là người khác truyền chân lý vào đầu cho bạn.

Các bạn cứ thay đổi giá trị để thấy sự rõ hơn sự khác biệt, 10 20 30 40 px …

margin còn có

margin-top: căn lề trên

margin-bottom: căn lề dưới

margin-left: căn lề trái

margin-right: căn lề phải

tương tự với padding

padding-top: tạo vùng đệm trên

padding-bottom: tạo vùng đệm dưới

padding-left: tạo vùng đệm trái

padding-right: tạo vùng đệm phải

Chúng ta cũng có thể viết tắt:

margin: 10px 10px : căn lề trên dưới 10px trái phải 10px

margin: 10px 10px 10px 10px: căn lề trên 10px dưới 10 px trái 10px phải 10px

Tương tự với padding nhé

Okê xong rồi đấy, mình xin nhắc lại cái này làm nhiều sẽ quen tay thôi :D. Vậy là chúng ta đã phân biệt được padding và margin mình xin được kết thúc bài viết tại đây.

Xem các bài viết khác tại đây.

avatar
  Subscribe  
Notify of