Thuộc tính margin và padding trong css

Nhiều chúng ta mới kiến thiết giao diện website khi áp dụng đến thuộc tính padding với margin thường thấp thỏm và bị nhầm lẫn thân hai thuộc tính này, xuất xắc bị nhầm lẫn như vậy do chúng phần lớn có chức năng tạo không gian giữa các phần tử. Vậy sử dụng như nhau sao? Dạ thưa là không chúng ta nhé, cách áp dụng của 2 trực thuộc tính này hoàn toàn khác cùng khi hiểu rõ và sử dụng xuất sắc 2 thuộc tính này để giúp đỡ giao diện của khách hàng tốt hơn với người sử dụng.


Bạn đang xem: Thuộc tính margin và padding trong css

Khái niệm về padding với margin

Đầu tiên để riêng biệt giữa padding với margin chúng ta xem hình bên dưới đây:

*
Nhìn vào hình này ta thấy margin đó là khoảng phương pháp của khối câu chữ so với thẻ thân phụ và padding là khoảng cách của câu chữ so với thẻ con.

Vậy là: Để tạo khoảng cách giữa

Margin dùng để tạo khoảng cách giữa nhị thẻ HTML.Padding dùng để tạo khoảng giữa thẻ HTML và câu chữ của nó

Cách áp dụng padding và margin

Sử dụng Margin

Cách sử dụng margin như sau:

margin-left: 10px : khoảng cách lề trái 10pxmargin-top:10px : khoảng cách lề bên trên 10pxmargin-right: 10px : khoảng cách lề buộc phải 10pxmargin-bottom: 10px : khoảng cách lề dưới 10pxmargin: 10px 10px 15px 15px vật dụng tự của những cạnh ở bí quyết viết này tuân theo chiều kim đồng hồ đeo tay bắt dầu từ : vị trí cao nhất – right – bottom – left.margin: 10px 10px 7px: 1 trong những 4 quý giá bị thiếu, thì nó đang lấy quý giá của cạnh đối diện.(trong lấy ví dụ này thì thiếu thốn left vậy left đang lấy quý giá của right = 10px) .margin: 10px 5px : Đây chỉ có 2 quý giá top với right (2 giá chỉ trị còn sót lại sẽ lấy quý giá cạnh đối diện)margin : 5px : toàn bộ lề trên, lề dưới, lề trái, lề nên (top – right – bottom – left ) đều phải sở hữu khoảng giải pháp 5px

Xem thêm: 999 Hình Ảnh Thiên Nhiên Đẹp Nhất Thế Giới Mê Hoặc Lòng Người

Ghi chú: Khi thực hiện thuộc tính margin thì đang không ảnh hưởng tới chiều rộng lớn của đối tượng người dùng HTML, nghĩa là ví như bạn tùy chỉnh cấu hình chiều rộng lớn width:100px và margin:20px thì thời điểm chiều rộng lớn của đối tượng so cùng với lề là 100px + 20px = 120px. Tức là chiều rộng width:100px sẽ không còn thay đổi.Thứ tự của các cạnh tuân theo hướng kim đồng hồ đeo tay bắt dầu trường đoản cú : đứng đầu – right – bottom – left.Tuy nhiên bạn có thể không rất cần được viết rất đầy đủ giá trị cho tư cạnh mà rất có thể viết 3, hoặc 2, hay thậm chí chỉ một giá trị. Nếu một trong những 4 quý hiếm bị thiếu, thì nó đang lấy cực hiếm của cạnh đối diện.


Sử dụng Padding

Các cách sử dụng margin:

padding-left: 10px : khoảng cách lề trái đối với nội dung phía bên trong 10pxpadding-top:20px : khoảng cách lề trên đối với nội dung bên trong 10pxpadding-right: 20px : khoảng cách lề đối với nội dung phía bên trong phải 10pxpadding-bottom: 20px : khoảng cách so với nội dung phía bên trong lề dưới 10pxpadding: 10px 10px 15px 15px vật dụng tự của những cạnh ở biện pháp viết này tuân theo chiều kim đồng hồ đeo tay bắt dầu trường đoản cú : top – right – bottom – left.padding: 10px 10px 7px: 1 trong 4 giá trị bị thiếu, thì nó sẽ lấy quý giá của cạnh đối diện.(trong lấy ví dụ như này thì thiếu left vậy left đang lấy giá trị của right = 10px) .padding: 10px 5px : Đây chỉ bao gồm 2 cực hiếm top cùng right (2 giá chỉ trị còn lại sẽ lấy cực hiếm cạnh đối diện)padding : 5px : tất cả lề trên, lề dưới, lề trái, lề yêu cầu so cùng với nội dung bên phía trong đều có khoảng cách 5px