Làm cách nào để loại bỏ các lề thừa trong css?

Thuộc tính

margin = 
<'margin-top'>{1,4}

5 có thể được chỉ định bằng một, hai, ba hoặc bốn giá trị. Mỗi giá trị là một
margin = 
<'margin-top'>{1,4}

1, một
margin = 
<'margin-top'>{1,4}

2 hoặc từ khóa
margin = 
<'margin-top'>{1,4}

3. Các giá trị âm kéo phần tử đến gần các phần tử lân cận hơn so với giá trị mặc định

  • Khi một giá trị được chỉ định, nó sẽ áp dụng cùng một lề cho cả bốn cạnh
  • Khi hai giá trị được chỉ định, lề đầu tiên áp dụng cho trên cùng và dưới cùng, lề thứ hai áp dụng cho bên trái và bên phải
  • Khi ba giá trị được chỉ định, lề đầu tiên áp dụng cho trên cùng, lề thứ hai ở bên phải và bên trái, lề thứ ba ở dưới cùng
  • Khi bốn giá trị được chỉ định, các lề sẽ áp dụng cho trên cùng, bên phải, dưới cùng và bên trái theo thứ tự đó (theo chiều kim đồng hồ)

giá trị

margin = 
<'margin-top'>{1,4}

1

Kích thước của lề dưới dạng giá trị cố định

margin = 
<'margin-top'>{1,4}

2

Kích thước của lề dưới dạng phần trăm, so với kích thước nội tuyến (chiều rộng theo ngôn ngữ ngang, được xác định bởi

margin = 
<'margin-top'>{1,4}

6) của khối chứa

margin = 
<'margin-top'>{1,4}

3

Trình duyệt chọn một lề phù hợp để sử dụng. Ví dụ: trong một số trường hợp, giá trị này có thể được sử dụng để căn giữa một phần tử

Sự mô tả

Thuộc tính này có thể được sử dụng để đặt lề trên cả bốn cạnh của một phần tử. Lề tạo thêm khoảng trống xung quanh một phần tử, không giống như

margin = 
<'margin-top'>{1,4}

8, tạo thêm khoảng trống trong một phần tử

Lề trên và dưới không ảnh hưởng đến các phần tử nội tuyến không được thay thế, chẳng hạn như

margin = 
<'margin-top'>{1,4}

9 hoặc
<div class="center">This element is centered.div>

<div class="outside">This element is positioned outside of its container.div>
0

định tâm ngang

Để căn giữa một cái gì đó theo chiều ngang trong các trình duyệt hiện đại, bạn có thể sử dụng

<div class="center">This element is centered.div>

<div class="outside">This element is positioned outside of its container.div>
1
<div class="center">This element is centered.div>

<div class="outside">This element is positioned outside of its container.div>
2
<div class="center">This element is centered.div>

<div class="outside">This element is positioned outside of its container.div>
3
<div class="center">This element is centered.div>

<div class="outside">This element is positioned outside of its container.div>
4

Tuy nhiên, trong các trình duyệt cũ hơn như IE8-9 không hỗ trợ Bố cục hộp linh hoạt, những thứ này không khả dụng. Để căn giữa một phần tử bên trong cha mẹ của nó, hãy sử dụng

<div class="center">This element is centered.div>

<div class="outside">This element is positioned outside of its container.div>
5

Thu hẹp ký quỹ

Lề trên và dưới của phần tử đôi khi được thu gọn thành một lề duy nhất bằng với lề lớn hơn trong hai lề. Xem Thu gọn lề chính để biết thêm thông tin