MARGIN LÀ GÌ CSS

     
1. Giới thiệu :

Nếu các bạn là fan mới làm quen với CSS , chúng ta cũng có thể đã nghe thấy các từ margin với padding nhưng lại không chắc chắn rằng về chân thành và ý nghĩa của bọn chúng hoặc cách áp dụng chúng vào các kiến thiết trang web. Margin và padding gồm những chức năng tương từ bỏ nhau vào việc thi công layout đến trang web. Tuy nhiên, bọn chúng không hoàn toàn giống nhau và gồm có điểm khác hoàn toàn cơ phiên bản quan trọng trong phương pháp sử dụng.Khi các bạn hiểu vừa đủ về sự khác biệt giữa margin với padding, các bạn sẽ có thể giới thiệu quyết định giỏi hơn dành cho việc xây dựng website của mình. Vị vậy, vào khuôn khổ nội dung bài viết này bọn họ sẽ cùng tìm hiểu về bí quyết mà 2 nằm trong tính này chuyển động thông qua rất nhiều ví dụ.

Bạn đang xem: Margin là gì css

2. Margin, Padding là gì ?

Margin : Nó là không khí xung quanh một phần tử. Margin được áp dụng để di chuyển 1 phần tử lên hoặc xuống trên một trang cũng giống như sang trái hoặc lịch sự phải. Margin hoàn toàn trong suốt với không có bất kỳ màu nền nào. Mục tiêu chính của margin là đẩy các bộ phận liền kề ra xa khỏi bộ phận có cất thuộc tính margin.

*

*

Padding : Nó là khoảng trống giữa thành phần và ngôn từ liên quan bên phía trong nó. Padding khẳng định các thành phần sẽ trông như thế nào và phương pháp chúng sẽ tiến hành đặt bên phía trong một container.Khi thành phần có ở trong tính padding thì không gian giữa nội dung bên trong phần tử cùng với lề của phần tử đó sẽ tăng lên và background của padding sẽ nhờ vào vào background của phần tử. Khi thêm padding thì kích cỡ của bộ phận có thể cầm cố đổi, mang định thì kích thước của nó sẽ tăng lên.

Xem thêm: What Up Là Gì ? Ý Nghĩa Của Thuật Ngữ Đặc Biệt Giới Trẻ Cách Diễn Đạt What'S Up

*

2. Khi nào thì thực hiện margin cùng padding:

Khi chúng ta đang kiểm soát và điều chỉnh bố cục của kiến tạo của mình, các bạn sẽ cần khẳng định xem nên kiểm soát và điều chỉnh margin giỏi padding.Nếu chiều rộng lớn trang của bạn được cố gắng định, câu hỏi căn giữa một trong những phần tử theo hướng ngang rất 1-1 giản, chỉ cần gán giá trị margin: auto . Bạn cũng trở nên sử dụng margin nhằm đặt khoảng cách giữa các bộ phận lân cận. Bạn sẽ thay đổi padding nếu bạn có nhu cầu tạo khoảng không giữa bộ phận và cạnh của vùng chứa hoặc con đường viền.Margin cũng hoàn toàn có thể được thực hiện để tạo thành khoản bí quyết giữ hình ảnh và diễn đạt của hình hình ảnh đó.

CSS Padding được áp dụng nếu bọn họ muốn tạo khoảng cách giữa một trong những phần tử cùng cạnh của vùng đựng hoặc mặt đường viền. Nó cũng bổ ích trong yêu thương cầu đổi khác kích thước của phần tử.

Xem thêm: Giới Thiệu Angular 4 Là Gì, Tất Tần Tật Những Điều Cần Biết Về Angular 4

Ví dụ về margin:

*

Ví dụ về padding:

*

Một giữ ý nhỏ dại là khi thêm padding mà bạn không cố định và thắt chặt chiều rộng cũng giống như độ cao của thành phần thì độ rộng và chiều cao của nó sẽ phụ thuộc vào độ béo của padding.

3. Sự khác biệt giữ margin và padding:

Sự kiểu như nhau thân margin và padding là phần đa dùng để biến hóa khoản cách. Mặc dù chúng trọn vẹn không như thể nhau, dưới đây là một vài ba điểm biệt lập giữa chúng

MarginPadding
Margin sẽ biến đổi khoản cách bên phía ngoài của phần tử so cùng với các thành phần khác nhưng mà không làm biến hóa kích thước của phân tửPadding sẽ thay đổi khoảng cách của nội dung bên phía trong phần tử so với những lề của nó và đang làm đổi khác kích thước của phần tử
Margin gật đầu đồng ý số âm cùng cả số thựcPadding không gật đầu đồng ý các quý hiếm âm
Margin tất cả thuộc tính autoPadding không có thuộc tính auto
Margin không tồn tại màu nềnMàu nền của Padding phụ thuộc vào vào màu sắc nền của element

*

4. Kết luận:

Qua bài viết lần này mình muốn các bạn sẽ hiểu hơn về margin và padding và vận dụng nó một cách đúng chuẩn nhất trong việc xây đắp giao diện

Nguồn tìm hiểu thêm : https://www.geeksforgeeks.org/css-padding-vs-margin/ Geeks for Geeks