Sự khác nhau giữa margin border và padding là gì năm 2024

Question

Cả padding và margin đều là khoảng cách, vậy nó khác nhau chỗ nào? Dễ ẹc: Đó là padding nằm trong viền, còn margin nằm ngoài viền.

Nội dung chính Show

Phân Biệt Padding và Margin trong CSS
CSS Padding

– Padding: Có nghĩa là “khoảng đệm” từ nội dung tới viền (border).

– Margin: Có nghĩa là “khoảng lề” từ viền (border) ra ngoài.

Sự khác nhau giữa padding và margin trong CSS

Ví dụ:

– Bạn muốn tạo một cái viền màu đen bao quanh nội dung, thì bạn xài thuộc tính border và gán giá trị là black (màu đen).

– Sau đó bạn muốn cái viền này dày 5px, thì bạn ghi thêm solid 5px.

– Bây giờ bạn muốn cái viền này bao quanh nhưng cách nội dung 10px, thì bạn xài thuộc tính padding và gán giá trị là 10px.

– Cuối cùng bạn muốn cái viền này cách hàng xóm xung quanh 10px, thì bạn xài thuộc tính margin và gán giá trị là 10px.

.class{

border: black solid 5px;
padding: 10px;
margin: 10px;

}

Hiểu được điểm khác nhau nhỏ xíu này sẽ giúp bạn code giao diện web tốt hơn và dễ hơn.

Tôi là nhà sáng lập Kênh Tin Học - Một người luôn có niềm đam mê với mọi thứ liên quan đến công nghệ và đổi mới.

Phân Biệt Padding và Margin trong CSS

Padding và Margin là hai thuộc tính thường được sử dụng trong CSS. Tuy nhiên rất nhiều bạn vẫn không phân biệt được sự khác nhau giữa hai thuộc tính 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 quan trọng 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 hình chữ nhật này được xem như một chiếc hộp và thuật ngữ box model được dùng để chỉ các hộp này:

CSS Padding

Padding (khoảng đệm) là thuộc tính được 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ử. Ví dụ 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ó kích 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 như sau:

p {

font-size: 13px;  
padding: 2px 3px 2px 3px;

}

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.

Tất nhiên bạn cũng hoàn toàn có thể chỉ sử 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;

}

Thuộc tính height của CSS dùng để xác định chiều cao của phần tử bao gồm cả khoảng đềm của phần tử (hay tính đến đường viền)

CSS Margin

Margin (lề) 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ử ra phía ngoài. Vẫn sử dụng ví dụ 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: 2px 3px;  
margin: 2px 3px;

}

Lúc này phần tử vẫn có chiều cao tổng cộng là 17px tuy nhiên 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.

Đ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.

Giống:

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

Khác:

margin tạo khoảng cách với phần tử so với lề
padding tạo khoảng cách với phần tử so với đường viền border
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ụ:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Margin và Padding</title> <style type="text/css">

h1{  
  color:red;  
  border: 2px solid blue;  
  margin: 20px;  
  display: inline-block;  
}  
h2{  
  color:red;  
  border: 2px solid blue;  
  padding:20px;  
  display: inline-block;  
}

</style> </head> <body> <h1> Phần tử margin</h1> <h2> Phần tử padding</h2> </body> </html>

Ở 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

`border`0: tạo vùng đệm phải

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

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

`border`2: 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.