So sánh giữa padding và margins

Khi mới bước vào thiết kế web bạn sẽ được nghe rất nhiều đến khái niệm “margin” và padding”. Và bạn dễ dàng hiểu được nó đề cập đến không gian giữa các phần tử.

Lúc đầu bạn có thể cảm thấy khá khó hiểu vì có vẻ như cả 2 thuộc tính đều tạo ra một khoảng trống xung quanh phần tử. Tuy nhiên một khi bạn hiểu được sự khác nhau giữa margin và padding bạn có thể đưa ra được quyết định thiết kế tốt hơn.

Padding là khoảng trống nằm giữa nội dung và viền (đường viền). Padding bao quanh 4 mặt của nội dung, tuy nhiên bạn có thể nhắm mục tiêu của padding và thay đổi padding của từng bên với css.

Margin là khoảng trống nằm giữa viền và phần tử tiếp theo. Bạn cứ hiểu không gian tính từ viền tới các phần tử khác được gọi là margin. Cũng tương tự như padding thì margin cũng bao quanh 4 mặt và bạn có thể nhắm mục tiêu margin trên, dưới, trái, phải cho nó.

Để cụ thể hơn mình sẽ minh họa cho các bạn bằng hình ảnh sau đây.

Hình ảnh trên được gọi là “box model”. Tức là mô hình hóa việc sử dụng css. Điều quan trọng là bạn phải hiểu mô hình hoạt động như thế nào, từ đó bạn có thể biết được chiều rộng, chiều cao của các khối hay thuộc tính. Khi bạn chỉ định chiều cao cho một phần tử thì nó chỉ cho phép bạn định nghĩa chiều cao của nội dung bên trong nó. Bạn sẽ phải thực hiện tính toán để sử dụng padding và margin sao cho có bố trí cân đối nhất.

Một điều quan trọng có thể gây nhầm lẫn đối với những người mới sử dụng padding và margin đó là không có sự hiện diện của đường viền khiến họ khó phân biệt.

Lời kết

Hoc3giay.com diễn đàn trao đổi khoa học, công nghệ, học tập, giải trí, khám phá – hãy tham gia cùng chúng tôi !

Hôm nay Green House xin hướng dẫn các bạn 2 thuộc tính cơ bản trong CSS khi lập trình website, đây là 2 thuộc tính được sử dụng nhiều nhất và phổ biến nhất, vì nó sẽ tăng độ hợp lý, đẹp đẽ trong website, đó chính là Padding và Margin. Vậy Padding là gì? Margin là gì? Cách sử dụng padding và margin trong css là gì?

Padding và Margin là hai thuộc tính được sử dụng thường xuyên trong code CSS. Tuy nhiên vẫn còn khá nhiều bạn chưa hiểu rõ và còn nhầm lẫn giữa hai thuộc tính này, vì chúng đều được sử dụng để điều chỉnh không gian giữa các phần tử. Tuy nhiên bài viết này mình sẽ đề cập sau hơn về 2 thuộc tính này.

Các bạn hãy xem hình vẽ sau và mình sẽ giải thích ở dưới

Padding và margin trong modal box

Box Model

Trên trang HTML, các phần tử của trang điều được biểu diễn bởi hình hộp chữ nhật. vì thế thuật ngữ box model được dùng để ám chỉ các phần tử của trang. Nhìn trên hình bạn sẽ thấy có 3 box model là 3 hình chữ nhật

Padding hiểu 1 cách đơn giản thì thuộc tính là khoảng trống nằm giữa nội dung và viền. Chúng ta sẽ có 4 khoảng cách giữa nội dung với viền và bên trái, bên phải, phía trên và phía dưới tương ứng là padding-top, padding-left, padding-right và padding-bottom. Chúng ta có thể hiểu đơn giản hơn, là padding chính là khoảng cách giữa thẻ mẹ so với thẻ con.

Cách sử dụng padding trong css:

p { padding: 2px 2px 2px 2px; }

hoặc

p { padding-left: 2px; padding-right: 2px ; padding-top: 2px; padding-bottom: 2px}

Margin là gì?

Margin cũng là khoảng cách, nhưng không phải là khoảng cách giữa thẻ mẹ so với thẻ con, mà là khoảng cách giữa các phần tử con với nhau, và khoảng cách giữa phần tử cùng với viền. Khoảng cách này cũng có 4 thuộc tính là trái phải, trên dưới tương ứng là margin-left, margin-right, margin-top, margin-bottom.

Cách sử dụng margin trong css:

p { margin: 2px 2px 2px 2px; }

hoặc

p { margin-left: 2px; margin-right: 2px ; margin-top: 2px; margin-bottom: 2px}

Hy vọng qua bài viết này, các bạn sẽ hiểu rõ hơn Margin và Padding và cách dùng chúng trong CSS để làm đẹp trang web của các bạn nhé.

If you’re new to CSS, you might have heard the words margin and padding but aren’t quite sure what they mean, or how to use them in your website designs. These concepts do similar things in CSS. However, they’re not quite the same, and there are important fundamental differences in their usage.

Once you fully understand the difference between margins and padding, you’ll be able to make better design decisions for your website. So let’s take a look at these two properties and what they do. We’ll include plenty of visual examples to illustrate how these important CSS components work.

What’s the difference between margin and padding in CSS?

In CSS, a margin is the space around an element’s border, while padding is the space between an element’s border and the element’s content. Put another way, the margin property controls the space outside an element, and the padding property controls the space inside an element.

Let’s explore margins first. Consider the element illustrated below, which has a margin of 10 pixels:

This means that there will be at least 10 pixels of space between this element and adjacent page elements — the margin “pushes away” its neighbors. If we put multiple of these elements together, we see how margins create whitespace between them, giving them room to breathe:

On the other hand, padding is located inside the border of an element. The element below has padding of 10px on the left and right sides, and padding of 15px on the top and bottom sides:

To create the gap, the padding either grows the element’s size or shrinks the content inside. By default, the size of the element increases. If you want to create the gap by shrinking the content, set the box-sizing property to border-box (i.e. box-sizing: border-box).

When to Use Margin vs. Padding

In general, use margins when you’re adjusting the spacing of an element in relation to another element (i.e a div in relation to another div on the page), and padding when you’re adjusting the look of an individual element (i.e the amount of pixels between the edge of a div and the text within it).

When you’re adjusting the layout of your design, you’ll need to determine whether to change the margins or the padding to achieve the desired visual effect. In this section, we’ll give some common uses for each property, starting with margins.

Uses for Margins

CSS margins determine the space surrounding an element. Therefore, margins can be used to...

1. Change an Element’s Position on the Page

CSS margins can move an element up or down on the page, as well as left or right. If the width of your page is fixed, centering an element horizontally is simple: Just assign the value margin: auto.

See the Pen CSS Margin vs. Padding - margin: auto by Christina Perricone (@hubspot) on CodePen.

2. Set the Distance Between Nearby Elements

Margins determine the amount of space between adjacent elements, or whitespace. Whitespace is important for making web pages visually palatable. For instance, use margins to add space between images or between an image and the text description below it:

See the Pen CSS Margin vs. Padding - Image Whitespace by Christina Perricone (@hubspot) on CodePen.

3. Overlap Elements

On the flip side, a negative margin value lets you overlap page elements. This can come in handy when trying to achieve a broken grid effect.

See the Pen CSS Margin vs. Padding - Broken Grid Effect by Christina Perricone (@hubspot) on CodePen.

Uses for Padding

CSS padding determines how content looks within its respective element. You can change CSS padding to achieve the following effects:

1. Add Space Between Content and Its Border

This is the most common use of padding, and it’s useful for creating whitespace inside your elements.

See the Pen CSS Margin vs. Padding - Padding Sizes by Christina Perricone (@hubspot) on CodePen.

2. Change the Size of an Element

When you increase the padding value, the content will stay the same size, but you will add more space around the content. This is useful for interactive elements, like buttons, when you want to expand the clickable area.

The CSS Box Model

To see how margins and padding work together to set spacing around an element’s content, we can also use the CSS box model. The CSS box model is used for page design and layout. Essentially, every HTML element in a document is wrapped inside a layered box that consists of the margin, border, padding, and content:

Applying height and width to your elements is easier once you understand the CSS box model. To ensure proper alignment, you’ll just need to do some simple math. However, if you’re confused about how the box model works, you could end up with a sloppy layout. To learn more about this concept, see our guide to the CSS box model.

The border is the layer of the CSS box model that sits between margin and padding. By default, the border does not have any width, but you can set one with the CSS border property.

Margin and padding are always parts of an element, even if there’s no visible border. This image illustrates such a case:

This can be a bit confusing for beginners — the two blocks of content don’t have a visible border, but the margin and padding still apply.

How to Add Margins in CSS

Every HTML element has four margins that you can toggle: top, right, bottom, and left.

To set the same margin value on all four sides of an element, use the margin property. To set the margin for specific sides of an element, use the margin-top, margin-right, margin-bottom, and margin-left properties.

See the Pen CSS Margin vs. Padding - Setting Margins 1 by Christina Perricone (@hubspot) on CodePen.

You can also specify the margin property with two, three, or four values depending on the sides you want to apply margins to. If you want even margins on every side, you’ll only need to apply one value. Otherwise, the order of the values is important:

• Two values apply to the top and bottom, then right and left.
• Three values apply to the top, then right and left, then bottom.
• Four values apply to the top, then right, then bottom, then left.

See the Pen CSS Margin vs. Padding - Setting Margins 2 by Christina Perricone (@hubspot) on CodePen.

Each value can be represented as a fixed length (often in px), a percentage (which defines the value as a percentage of the width of its container), or auto (which lets the browser set the margin).

How to Add Padding in CSS

Like with margins, padding has four sides to be declared: top, right, bottom, and left.

To set padding on all sides, use the shorthand property padding. To set padding for a specific side, use the padding-top, padding-right, padding-bottom, and padding-left properties.

See the Pen CSS Margin vs. Padding - Setting Padding 1 by Christina Perricone (@hubspot) on CodePen.

When using the padding shorthand property, you may also define the padding using two, three, or four values. As with margins, one value will apply on all four sides. Otherwise, the order the values are written will determine which sides each applies to:

• Two values apply to the top and bottom, then right and left.
• Three values apply to the top, then right and left, then bottom.
• Four values apply to the top, then right, then bottom, then left.

See the Pen CSS Margin vs. Padding - Setting Padding 2 by Christina Perricone (@hubspot) on CodePen.

Each value may be represented as a fixed length or a percentage (which defines it as a percentage of the width of the container).

CSS Margins and Padding: Similar, But Not the Same

To space out elements in CSS, you’ll typically use the margin and padding properties. Understanding the difference is a step toward mastering CSS. You now also know how to set the margin and padding using the shorthand property, which is much quicker than defining each side independently.

In web design and web development, HTML and CSS go hand-in-hand. HTML defines content structure and semantics, while CSS establishes styling and layout. If you’re a beginner, we recommend becoming fully acquainted with HTML before attempting CSS. Keep going back to HTML as you learn CSS until you fully understand HTML. Once you’ve applied CSS, HTML becomes much more interesting.

Editor's note: This post was originally published in April 2020 and has been updated for comprehensiveness.