Lề âm trong CSS hoạt động như thế nào và tại sao lại như vậy (margin-top: -5! = Margin-bottom: 5)?

108

Một mẹo phổ biến cho các phần tử định vị dọc là sử dụng CSS sau:

.item {
    position:absolute;
    top:50%;
    margin-top:-8px; /* half of height */
    height: 16px;
}

Khi được nhìn thấy trong chế độ xem chỉ số như trong Chrome, đây là những gì bạn thấy:

nhập mô tả hình ảnh ở đây

Tuy nhiên, không có lề trực quan nào được mô tả khi bạn di chuột qua phần tử, tức là lề nằm 'ngoài' đường viền và có thể được hiển thị. Nhưng lợi nhuận âm không hiển thị. Chúng trông như thế nào và điều gì khiến nó khác biệt?

Tại sao margin-top:-8px không giống như margin-bottom:8px ?

Vì vậy, lợi nhuận tiêu cực hoạt động như thế nào và trực giác đằng sau chúng là gì. Làm thế nào để họ 'tăng' (trong trường hợp margin-top < 0) một mặt hàng?

css margin

— Bằng tiến sĩ
nguồn

89

Lề âm có hiệu lực trong css và việc hiểu được hành vi (tuân thủ) của chúng chủ yếu dựa trên mô hình hộp và thu gọn lợi nhuận. Trong khi một số tình huống phức tạp hơn, bạn có thể tránh được nhiều lỗi phổ biến sau khi nghiên cứu thông số kỹ thuật.

Ví dụ: việc hiển thị mã mẫu của bạn được hướng dẫn bởi thông số kỹ thuật css như được mô tả trong việc tính toán chiều cao và lề cho các phần tử không thay thế được định vị tuyệt đối .

Nếu tôi thực hiện một biểu diễn đồ họa, tôi có thể sẽ làm với một cái gì đó như thế này (không chia tỷ lệ):

lợi nhuận trên cùng âm

Hộp lề bị mất 8pxở trên cùng, tuy nhiên điều này không ảnh hưởng đến nội dung và hộp đệm . Bởi vì phần tử của bạn đã được định vị tuyệt đối, việc di chuyển phần tử lên 8px không gây thêm bất kỳ xáo trộn nào cho bố cục; với nội dung trong luồng tĩnh không phải lúc nào cũng vậy.

Tặng kem:

Vẫn cần thuyết phục rằng đọc thông số kỹ thuật là những con đường để đi (như trái ngược với bài viết như thế này )? Tôi thấy bạn đang cố căn giữa phần tử theo chiều dọc, vậy tại sao bạn phải đặt margin-top:-8px;và không đặt margin-top:-50%;?

Chà, căn giữa theo chiều dọc trong CSS khó hơn hẳn . Khi đặt ngay cả lề trên hoặc dưới theo%, giá trị luôn được tính theo tỷ lệ phần trăm so với chiều rộng của khối chứa . Đây là một cạm bẫy khá phổ biến và điều kỳ quặc hiếm khi được mô tả bên ngoài w3 docos

— noãn
nguồn

84

Tôi sẽ cố gắng giải thích nó một cách trực quan:

/**
 * explaining margins
 */

body {
  padding: 3em 15%
}

.parent {
  width: 50%;
  width: 400px;
  height: 400px;
  position: relative;
  background: lemonchiffon;
}

.parent:before,
.parent:after {
  position: absolute;
  content: "";
}

.parent:before {
  top: 0;
  bottom: 0;
  left: 50%;
  border-left: dashed 1px #ccc;
}

.parent:after {
  left: 0;
  right: 0;
  top: 50%;
  border-top: dashed 1px #ccc;
}

.child {
  width: 200px;
  height: 200px;
  background: rgba(200, 198, 133, .5);
}

ul {
  padding: 5% 20px;
}

.set1 .child {
  margin: 0;
  position: relative;
}

.set2 .child {
  margin-left: 75px;
  position: relative;
}

.set3 .child {
  margin-left: -75px;
  position: relative;
}


/* position absolute */

.set4 .child {
  top: 50%;
  left: 50%;
  margin: 0;
  position: absolute;
}

.set5 .child {
  top: 50%;
  left: 50%;
  margin-left: 75px;
  position: absolute;
}

.set6 .child {
  top: 50%; /* level from which margin-top starts 
	- downwards, in the case of a positive margin
	- upwards, in the case of a negative margin	
	*/
  left: 50%; /* level from which margin-left starts 
	- towards right, in the case of a positive margin
	- towards left, in the case of a negative margin	
	*/
  margin: -75px;
  position: absolute;
}

<!-- content to be placed inside <body>…</body> -->
<h2><code>position: relative;</code></h2>
<h3>Set 1</h3>
<div class="parent set 1">
  <div class="child">
    <pre>
.set1 .child {
  margin: 0;
  position: relative;
}
		</pre>
  </div>
</div>

<h3>Set 2</h3>
<div class="parent set2">
  <div class="child">
    <pre>
.set2 .child {
  margin-left: 75px;
  position: relative;
}
		</pre>
  </div>
</div>

<h3>Set 3</h3>
<div class="parent set3">
  <div class="child">
    <pre>
.set3 .child {
  margin-left: -75px;
  position: relative;
}
		</pre>
  </div>
</div>

<h2><code>position: absolute;</code></h2>

<h3>Set 4</h3>
<div class="parent set4">
  <div class="child">
    <pre>
.set4 .child {
  top: 50%;
  left: 50%;
  margin: 0;
  position: absolute;
}
		</pre>
  </div>
</div>

<h3>Set 5</h3>
<div class="parent set5">
  <div class="child">
    <pre>
.set5 .child {
  top: 50%;
  left: 50%;
  margin-left: 75px;
  position: absolute;
}
		</pre>
  </div>
</div>

<h3>Set 6</h3>
<div class="parent set6">
  <div class="child">
    <pre>
.set6 .child {
  top: 50%;
  left: 50%;
  margin: -75px;
  position: absolute;
}
		</pre>
  </div>
</div>

Mở rộng đoạn mã

— Ana
nguồn

33

Lề là khoảng cách bên ngoài phần tử của bạn, cũng như phần đệm là khoảng cách bên trong phần tử của bạn.

Đặt lề dưới cho biết bạn muốn khoảng cách nào bên dưới khối hiện tại. Đặt lề trên âm cho biết rằng bạn muốn có khoảng cách âm phía trên khối của mình. Khoảng cách âm bản thân nó có thể là một khái niệm khó hiểu, nhưng chỉ là cách lề trên tích cực đẩy nội dung xuống, lề trên âm sẽ kéo nội dung lên.

— David Hedlund
nguồn

2

+1 Tôi thích câu trả lời của bạn. Nó có thể được cải thiện bằng cách tiêm các từ onsetvà offset. Đúng là nhiều người luôn sử dụng từ offset( tiêu cực ) khi chúng có nghĩa là onset( tích cực ). Thông báo này sẽ tự hủy nếu bạn cập nhật câu trả lời của mình. Chúc mừng!

— arttronics

1

Về margin-bottom: -8px;thì sao? Tại sao margin-bottom:-8pxkhông giống như margin-top:-8px?

— Rick

27

Một lề đầu -8px có nghĩa là nó sẽ cao hơn 8px so với khi nó có lề 0.

Lề dưới 8px có nghĩa là thứ bên dưới nó sẽ thấp hơn 8px nếu nó có lề 0.

— Rich Bradshaw
nguồn

1

Tôi chỉ cố gắng giữ mọi thứ đơn giản, nhưng tôi đồng ý, đây có thể là câu trả lời tồi tệ nhất được viết trong các câu trả lời của tôi!

— Rich Bradshaw vào

2

Tôi nghĩ câu trả lời khá tốt. Không sử dụng các câu trả lời mang tính kỹ thuật cao mà một nửa trong số chúng ta không hiểu được.

— Number945, 20/02/17

1

Về margin-bottom: -8px;thì sao? Tại sao margin-bottom:-8pxkhông giống như margin-top:-8px?

— Rick

22

những điểm tốt đã được thực hiện ở đây, nhưng trong khi có rất nhiều thông tin về cách trình duyệt hoàn thành việc hiển thị lề, lý do tại sao vẫn chưa được giải đáp:

"Tại sao margin-top: -8px không giống với margin-bottom: 8px?"

những gì chúng tôi cũng có thể hỏi là:

Tại sao lề dưới dương không 'tăng' các phần tử trước, trong khi lề trên dương 'tăng' các phần sau?

vì vậy những gì chúng ta thấy là có sự khác biệt trong việc hiển thị các lề tùy thuộc vào mặt mà chúng được áp dụng - lề trên (và trái) khác với lề dưới (và phải).

mọi thứ trở nên rõ ràng hơn khi có cái nhìn (đơn giản hóa) về cách trình duyệt áp dụng các kiểu: các phần tử được hiển thị từ trên xuống trong khung nhìn, bắt đầu ở góc trên cùng bên trái (bây giờ hãy gắn bó với kết xuất dọc, hãy nhớ rằng chiều ngang được đối xử như nhau).

hãy xem xét html sau:

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>

tương tự như vị trí của chúng trong mã, ba hộp này xuất hiện xếp chồng lên nhau 'từ trên xuống' trong trình duyệt ( giữ mọi thứ đơn giản, chúng tôi sẽ không xem xét ở đây thuộc ordertính của mô-đun css3 'flex-box' ). vì vậy, bất cứ khi nào các kiểu được áp dụng cho hộp 3, vị trí của phần tử trước đó (cho hộp 1 và 2) đã được xác định và không nên thay đổi thêm vì lợi ích của tốc độ kết xuất.

bây giờ, hãy tưởng tượng lề trên cùng là -10px cho hộp 3. thay vì chuyển lên tất cả các phần tử trước đó để thu thập một số không gian, trình duyệt sẽ chỉ đẩy hộp 3 lên, vì vậy nó được hiển thị ở trên cùng (hoặc bên dưới, tùy thuộc vào chỉ số z ) bất kỳ phần tử nào đứng trước. ngay cả khi hiệu suất không phải là vấn đề, việc di chuyển tất cả các phần tử lên có thể đồng nghĩa với việc chuyển chúng ra khỏi khung nhìn, do đó vị trí cuộn hiện tại sẽ phải được thay đổi để mọi thứ hiển thị trở lại.

điều tương tự cũng áp dụng cho lề dưới cùng cho hộp 3, cả tiêu cực và tích cực: thay vì ảnh hưởng đến các yếu tố đã được đánh giá, chỉ xác định 'điểm bắt đầu' mới cho các yếu tố sắp tới. do đó việc thiết lập một biên đáy dương sẽ đẩy các yếu tố sau xuống; một tiêu cực sẽ đẩy chúng lên.

— schellmax
nguồn

Câu trả lời TỐT NHẤT. Câu trả lời này cũng giải thích "tại sao", trong khi câu trả lời khác chỉ giải thích "làm thế nào".

— Amir Hossein Ahmadi

1

Câu trả lời này đã giúp tôi hiểu lý do tại sao tốt hơn. Cảm ơn bạn @schellmax

— iRamesh

3

Bởi vì bạn đã sử dụng định vị tuyệt đối và chỉ định tỷ lệ phần trăm cao nhất, chỉ margin-top mới ảnh hưởng đến vị trí của đối tượng .item của bạn. Thay vào đó, nếu bạn định vị nó bằng bottom: 50%, thì bạn sẽ cần margin-bottom -8px để căn giữa và margin-top sẽ không có tác dụng.

Ký quỹ ảnh hưởng đến ranh giới của một phần tử về vị trí của nó, hoàn toàn như trong trường hợp của bạn hoặc so với các phần tử lân cận. Hãy tưởng tượng rằng lợi nhuận là nền tảng của phần tử của bạn mà nó nằm trên đó. Chúng thường có cùng kích thước với nó, nhưng có thể được làm lớn hơn hoặc nhỏ hơn trên bất kỳ hoặc tất cả bốn cạnh.

CSS của bạn yêu cầu trình duyệt đặt lề trên phần tử của bạn ở vị trí 50% đường xuống trang. Tuy nhiên, vì tất cả các phần tử không phải là một pixel duy nhất, nên trình duyệt cần biết phần nào của nó để xếp hàng 50% đường xuống trang. Để xếp trên cùng của phần tử, nó sử dụng lề trên. Theo mặc định, điều này phù hợp với phần trên cùng của phần tử, nhưng bạn có thể thay đổi nó bằng CSS.

Trong trường hợp của bạn, 50% hàng đầu sẽ dẫn đến phần đầu của phần tử bắt đầu ở giữa trang. Bằng cách áp dụng lề trên cùng âm, trình duyệt sử dụng điểm 8px vào phần tử từ trên cùng (tức là đường ngang giữa nó) làm vị trí để định vị ở mức 50%.

Nếu bạn áp dụng một lề dương cho phần dưới cùng, điều này sẽ kéo dài đường mà trình duyệt sử dụng để định vị phần dưới ra khỏi chính phần tử, tạo ra khoảng cách giữa phần tử đó và bất kỳ phần tử liền kề nào bên dưới hoặc ảnh hưởng đến vị trí đặt nó hoàn toàn nếu định vị dựa trên dưới cùng.

— Rob Trickey
nguồn

+1. Có lý ... thật tuyệt nếu tăng cường nó với các dấu hiệu trực quan để hoàn thành việc hình dung .

— Tiến sĩ,

3

Tôi tự hỏi nếu câu hỏi này đã được trả lời tốt: lề css hoạt động như thế nào và tại sao nó lại là margin-top: -5; không giống như margin-bottom: 5;?

Lề là khoảng cách từ môi trường xung quanh của phần tử. margin-top cho biết "... khoảng cách từ môi trường xung quanh khi chúng tôi đo từ phía trên 'bên' của 'hộp' của phần tử và margin-bottom là khoảng cách từ phía dưới 'bên' của 'hộp'". Sau đó, margin-top: 5; liên quan đến chu vi 'bên' trên cùng, -5 trong trường hợp đó; bất cứ thứ gì tiếp cận từ 'bên' trên cùng có thể chồng lên 'bên' trên cùng của phần tử bằng 5 và margin-bottom: 5; có nghĩa là khoảng cách giữa phần tử 'bên' và xung quanh là 5.

Về cơ bản là vậy nhưng bị ảnh hưởng bởi các phần tử float và những thứ tương tự: http://www.w3.org/TR/CSS2/box.html#margin-properties .

http://coding.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/

Tôi chấp nhận chịu chỉnh sửa lại.

— Có lẽ
nguồn