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.