Tại sao CSS không hỗ trợ đệm âm?

Tôi đã thấy điều này nhiều lần rằng triển vọng của phần đệm âm có thể giúp sự phát triển CSS của các yếu tố trang nhất định trở nên tốt hơn và dễ dàng hơn. Tuy nhiên, không có điều khoản nào cho phần đệm âm trong CSS của W3C. lý do đằng sau này là gì? Có bất kỳ sự cản trở nào đối với tài sản ngăn chặn việc sử dụng nó như vậy không? Cảm ơn câu trả lời của bạn.

CẬP NHẬT

Như tôi thấy, ví dụ, trong trường hợp bạn đang sử dụng phông chữ có khoảng cách dọc 20px và bạn muốn áp dụng đường viền nét đứt ở dưới cùng của phông chữ, hãy nói khi siêu liên kết xuất hiện. Trong những trường hợp như vậy, bạn sẽ thấy phong cách trở nên quá tồi tàn, vì đường viền nét đứt sẽ xuất hiện 20px bên dưới từ được chỉ định. nếu bạn sử dụng lề âm, nó sẽ không hoạt động, vì lề thay đổi khu vực bên ngoài đường viền. Đệm tiêu cực có thể giúp đỡ trong các tình huống như vậy.

Gần đây tôi đã trả lời một câu hỏi khác mà tôi đã thảo luận tại sao mô hình hộp là như vậy.

Có những lý do cụ thể cho từng phần của mô hình hộp. Đệm có nghĩa là để mở rộng nền ngoài nội dung của nó. Nếu bạn cần thu nhỏ nền của thùng chứa, bạn nên đặt thùng chứa cha có kích thước chính xác và cung cấp cho phần tử con một số lề âm. Trong trường hợp này, nội dung không được đệm , nó tràn ra.

Đệm theo định nghĩa là một số nguyên dương (bao gồm 0).

Việc đệm tiêu cực sẽ khiến đường viền thu gọn vào nội dung (xem trang mô hình hộp trên w3) - điều này sẽ làm cho khu vực nội dung nhỏ hơn nội dung, điều này không có ý nghĩa.

Tôi muốn mô tả một ví dụ rất hay về lý do tại sao negative paddingsẽ hữu ích và tuyệt vời.

Như tất cả các nhà phát triển CSS của chúng tôi đều biết, việc sắp xếp theo chiều dọc một div kích thước linh hoạt trong một thứ khác là một rắc rối và đối với hầu hết các phần, được xem là không thể chỉ sử dụng CSS. Sự kết hợp của negative paddingcó thể thay đổi điều này.

Vui lòng xem lại HTML sau:

<div style="height:600px; width:100%;">
    <div class="vertical-align" style="width:100%;height:auto;" >
        This DIV's height will change based the width of the screen.
    </div>
</div>

Với CSS sau, chúng ta có thể căn giữa theo chiều dọc nội dung bên divtrong bên ngoài div:

.vertical-align {
    position: absolute;
    top:50%;
    padding-top:-50%;
    overflow: visible;
}

Cho phép tôi giải thích ...

Hoàn toàn định vị đỉnh của div bên trong ở 50% đặt cạnh trên của div bên trong ở trung tâm của div ngoài. Khá đơn giản. Điều này là do định vị dựa trên tỷ lệ phần trăm liên quan đến kích thước bên trong của phần tử cha .

Mặt khác, phần đệm dựa trên tỷ lệ phần trăm dựa trên kích thước bên trong của phần tử được nhắm mục tiêu . Vì vậy, bằng cách áp dụng thuộc tính của padding-top: -50%;chúng tôi, đã chuyển nội dung của div bên trong lên khoảng cách 50% chiều cao của nội dung của div bên trong, do đó, tập trung vào nội dung của div bên trong trong div bên ngoài và vẫn cho phép kích thước chiều cao của div bên trong để được năng động!

Nếu bạn hỏi tôi OP, đây sẽ là trường hợp sử dụng tốt nhất và tôi nghĩ nó nên được thực hiện chỉ để tôi có thể thực hiện việc hack này. cười lớn. Hoặc, họ chỉ nên sửa chức năng của vertical-alignvà cung cấp cho chúng tôi phiên bản vertical-alignhoạt động trên tất cả các yếu tố.

Điều này có thể giúp, bằng cách này:

Các hộp kích thước thuộc tính CSS được sử dụng để thay đổi các mô hình hộp CSS mặc định sử dụng để tính toán độ rộng và chiều cao của các yếu tố.

http://www.w3.org/TR/css3-ui/#box-sizing
https://developer.mozilla.org/En/CSS/Box-sizing

Bạn hỏi TẠI SAO chứ không phải làm thế nào để lừa dối nó:

Thông thường vì sự lười biếng của các lập trình viên khi triển khai ban đầu, vì họ đã nỗ lực nhiều hơn trong các tính năng khác, mang lại nhiều tác dụng phụ kỳ lạ hơn như phao, bởi vì chúng được các nhà thiết kế yêu cầu nhiều hơn trước đó và họ vẫn không mất thời gian để cho phép điều này để chúng ta có thể sử dụng các thuộc tính BỐN để đẩy / kéo một phần tử so với các lân cận của nó (bây giờ chúng ta chỉ có bốn để đẩy và chỉ có 2 để kéo).

Khi html được thiết kế, các tạp chí yêu thích văn bản phản chiếu xung quanh hình ảnh hồi đó, bây giờ bị ghét vì ngày nay chúng ta có xu hướng chạm và yêu thích những thứ tầm thường với nhiều không gian và không có gì để đọc. Đó là lý do tại sao họ gây áp lực lên phao nhiều hơn là định tâm, hoặc họ có thể đã thiết kế một cái gì đó giống như margin-top: fill;hoặc margin: average 0;chỉ đơn giản là sắp xếp nội dung xuống phía dưới, hoặc phân phối không gian thừa của nó xung quanh.

Trong trường hợp này, tôi nghĩ rằng nó đã không được triển khai vì lý do tương tự khiến CSS thiếu :parentbộ chọn giả: Để ngăn các đánh giá lặp.

Không phải là một kỹ sư, tôi có thể thấy rằng CSS ngay bây giờ được tạo ra để vẽ các phần tử một lần, ghi nhớ một số thuộc tính cho các phần tử trong tương lai sẽ được vẽ, nhưng KHÔNG BAO GIỜ quay lại các phần tử đã được vẽ.

Đó là lý do tại sao (tôi đoán) phần đệm được tính theo chiều rộng, bởi vì đó là giá trị có sẵn tại thời điểm bắt đầu vẽ nó.

Nếu bạn có một giá trị âm cho phần đệm, nó sẽ ảnh hưởng đến các giới hạn bên ngoài, điều này đã được xác định khi lề đã được đặt. Tôi biết, chưa có gì được vẽ, nhưng khi bạn đọc quá trình vẽ diễn ra như thế nào, được tạo ra bởi những thiên tài với công nghệ của thập niên 90, tôi cảm thấy như mình đang hỏi những câu hỏi ngớ ngẩn và chỉ nói "cảm ơn" hehe.

Một trong những yêu cầu của các trang web là chúng nhanh chóng có sẵn, không giống như một ứng dụng có thể mất thời gian và ăn tài nguyên máy tính để có được mọi thứ chính xác trước khi hiển thị, các trang web cần sử dụng ít tài nguyên (để chúng phù hợp với mọi thiết bị có thể) và được cuộn trong một làn gió.

Nếu bạn thấy các ứng dụng có tính năng chỉnh lại và định vị phức tạp, như InDesign, bạn không thể cuộn nhanh như vậy! Phải mất một nỗ lực lớn cả từ bộ xử lý và card đồ họa để chuyển sang các trang tiếp theo!

Vì vậy, vẽ và tính toán về phía trước và quên đi một yếu tố từng được vẽ, bây giờ nó dường như là một PHẢI.

Lắp một Iframe bên trong các container sẽ không khớp với kích thước của container. Nó thêm khoảng 20px của phần đệm. Hiện tại không có cách dễ dàng để khắc phục điều này. Bạn cần javascript ( http://css-tricks.com/snippets/jquery/fit-iframe-to-content/ )

Lợi nhuận âm sẽ là một giải pháp dễ dàng.

Bởi vì các nhà thiết kế CSS không có tầm nhìn xa để tưởng tượng sự linh hoạt mà điều này sẽ mang lại. Có rất nhiều lý do để mở rộng khu vực nội dung của hộp mà không ảnh hưởng đến mối quan hệ của nó với các yếu tố lân cận. Nếu bạn nghĩ rằng điều đó là không thể, hãy đặt một số nowrapvăn bản dài vào một hộp, đặt chiều rộng trên hộp và xem cách nội dung tràn không làm gì cho bố cục.

Vâng, điều này vẫn phù hợp với CSS3 vào năm 2019; trường hợp tại điểm: bố trí flexbox. Các lề của vật phẩm Flexbox không bị sập, do đó, để không gian chúng đồng đều và căn chỉnh chúng với cạnh trực quan của vật chứa, người ta phải trừ lề của vật phẩm khỏi phần đệm của chúng. Nếu bất kỳ kết quả nào <0, bạn phải sử dụng mức ký quỹ âm trên vùng chứa hoặc tính tổng số âm đó với mức ký quỹ hiện có. Tức là nội dung của các yếu tố ảnh hưởng đến cách người ta xác định lề cho nó, đó là ngược. Tính tổng không hoạt động sạch khi nội dung của các phần tử flex có lề được xác định theo các đơn vị khác nhau hoặc bị ảnh hưởng bởi một cỡ chữ khác nhau, v.v.

Ví dụ dưới đây, lý tưởng là có các hộp màu xám thẳng hàng và cách đều nhau, nhưng thật đáng buồn là chúng không có.

body {
  font-family: sans-serif;
  margin: 2rem;
}
body > * {
  margin: 2rem 0 0;
}
body > :first-child {
  margin-top: 0;
}
h1,
li,
p {
  padding: 10px;
  background: lightgray;
}
ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  padding: 0;/* just to reset */
  padding: -5px;/* would allow correct alignment */
}
li {
  flex: 1 1 auto;
  margin: 5px;
}

<h1>Cras facilisis orci ligula</h1>

<ul>
  <li>a lacinia purus porttitor eget</li>
  <li>donec ut nunc lorem</li>
  <li>duis in est dictum</li>
  <li>tempor metus non</li>
  <li>dapibus sapien</li>
  <li>phasellus bibendum tincidunt</li>
  <li>quam vitae accumsan</li>
  <li>ut interdum eget nisl in eleifend</li>
  <li>maecenas sodales interdum quam sed accumsan</li>
</ul>

<p>Fusce convallis, arcu vel elementum pulvinar, diam arcu tempus dolor, nec venenatis sapien diam non dui. Nulla mollis velit dapibus magna pellentesque, at tempor sapien blandit. Sed consectetur nec orci ac lobortis.</p>

<p>Integer nibh purus, convallis eget tincidunt id, eleifend id lectus. Vivamus tristique orci finibus, feugiat eros id, semper augue.</p>

Tôi đã gặp đủ những vấn đề nhỏ này trong nhiều năm qua khi một phần đệm tiêu cực sẽ đi một chặng đường dài, nhưng thay vào đó tôi buộc phải thêm đánh dấu phi ngữ nghĩa, sử dụng calc()hoặc bộ tiền xử lý CSS chỉ hoạt động khi các đơn vị giống nhau , Vân vân.