Dlaczego CSS nie obsługuje dopełnienia ujemnego?

Wielokrotnie widziałem to, że perspektywa negatywnego wypełnienia może pomóc w rozwoju CSS niektórych elementów strony na lepsze i łatwiejsze. Jednak w W3C CSS nie ma przepisu na ujemne wypełnienie. Jaki jest tego powód? Czy jest jakaś przeszkoda w nieruchomości, która uniemożliwia jej wykorzystanie jako takiej? Dziękuję za odpowiedzi.

AKTUALIZACJA

Jak widzę, na przykład w przypadku, gdy używasz czcionki, która ma coś, powiedzmy, 20 pikseli odstępów w pionie, i chcesz zastosować przerywaną ramkę na dole czcionki, powiedz, kiedy pojawi się hiperłącze. W takich przypadkach styl będzie zbyt odrapany, ponieważ przerywana ramka pojawi się 20 pikseli poniżej określonego słowa. jeśli użyjesz ujemnego marginesu, to nie zadziała, ponieważ margines zmienia obszar poza granicami. W takich sytuacjach może pomóc dopełnienie negatywne.

Niedawno odpowiedziałem na inne pytanie, w którym omówiłem dlaczego model pudełkowy jest taki, jaki jest.

Każda część modelu pudełkowego ma swoje specyficzne powody. Dopełnienie ma na celu rozszerzenie tła poza jego zawartość. Jeśli chcesz zmniejszyć tło kontenera, powinieneś ustawić odpowiedni rozmiar kontenera nadrzędnego i nadać elementowi potomnemu pewne ujemne marginesy. W tym przypadku zawartość nie jest wypełniona , jest przepełniona.

Wypełnienie z definicji jest dodatnią liczbą całkowitą (łącznie z 0).

Ujemne dopełnienie spowodowałoby zwinięcie obramowania do treści (patrz strona modelu pudełkowego na w3) - spowodowałoby to, że obszar zawartości byłby mniejszy niż zawartość, co nie ma sensu.

Chciałbym opisać bardzo dobry przykład dlaczego negative padding byłby przydatny i niesamowity.

Jak wszyscy z nas, programiści CSS, wiemy, że wyrównanie w pionie dynamicznie zmieniającego się elementu div w innym jest kłopotliwe i przez większość czasu postrzegane jako niemożliwe tylko przy użyciu CSS. Włączenienegative padding może to zmienić.

Zapoznaj się z następującym kodem HTML:

<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>

Dzięki poniższemu CSS moglibyśmy wyśrodkować w pionie zawartość wewnętrznej divczęści zewnętrznej div:

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

Pozwólcie mi wyjaśnić ...

Absolutne ustawienie górnej krawędzi wewnętrznego elementu div na 50% powoduje umieszczenie górnej krawędzi wewnętrznego elementu div na środku zewnętrznego elementu div. Dość proste. Dzieje się tak, ponieważ pozycjonowanie oparte na procentach jest odniesione do wewnętrznych wymiarów elementu nadrzędnego .

Z drugiej strony wypełnienie procentowe opiera się na wewnętrznych wymiarach elementu docelowego . Tak więc, stosując właściwość elementu padding-top: -50%;div, przesunęliśmy zawartość wewnętrznego elementu DIV w górę o odległość 50% wysokości zawartości elementu DIV, w ten sposób umieszczając zawartość wewnętrznego elementu DIV w środku elementu DIV i nadal umożliwiając wymiar wysokości elementu wewnętrzny div, aby był dynamiczny!

Jeśli zapytasz mnie OP, byłby to najlepszy przypadek użycia i myślę, że powinien zostać zaimplementowany tylko po to, abym mógł zrobić ten hack. lol. Lub powinni po prostu naprawić funkcjonalność vertical-aligni dać nam wersję, vertical-alignktóra działa na wszystkich elementach.

Przy okazji może to pomóc:

Rozmiar pudełka CSS służy do zmiany domyślnego modelu CSS używanego do obliczania szerokości i wysokości elementów.

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

Zapytałeś DLACZEGO, a nie jak to oszukać:

Zwykle z powodu lenistwa programistów początkowej implementacji, ponieważ już włożyli o wiele więcej wysiłku w inne funkcje, dostarczając bardziej dziwne efekty uboczne, takie jak floaty, ponieważ projektanci byli wtedy bardziej wymagani przez projektantów, a mimo to nie poświęcili czasu aby to umożliwić, abyśmy mogli użyć CZTERY właściwości do popchnięcia / przyciągnięcia elementu do sąsiadów (teraz mamy tylko cztery do pchania i tylko 2 do ciągnięcia).

Kiedy projektowano html, magazyny uwielbiały w tamtych czasach powracać do tekstu wokół obrazów, teraz znienawidzone, ponieważ dziś mamy trendy dotykowe i uwielbiamy proste rzeczy z dużą ilością miejsca i bez treści do czytania. Dlatego kładą większy nacisk na pływaki niż na centrowanie, lub mogli zaprojektować coś takiego jak margin-top: fill;lubmargin: average 0; po prostu wyrównać zawartość do dołu lub rozprowadzić dodatkową przestrzeń wokół.

W tym przypadku myślę, że nie został zaimplementowany z tego samego powodu, dla którego CSS nie zawiera pliku :parent pseudo-selektora: aby zapobiec zapętleniu ocen.

Nie będąc inżynierem, widzę, że CSS jest teraz stworzony do malowania elementów raz, pamiętam pewne właściwości przyszłych elementów do malowania, ale NIGDY nie wracam do już pomalowanych elementów.

Dlatego (chyba) dopełnienie jest obliczane na podstawie szerokości, bo to wartość, która była dostępna w momencie rozpoczęcia malowania.

Gdybyś miał ujemną wartość dla wypełnienia, wpłynęłoby to na zewnętrzne granice, które zostały JUŻ zdefiniowane, gdy margines został już ustawiony. Wiem, że jeszcze nic nie zostało namalowane, ale kiedy czytasz jak przebiega proces malowania, stworzony przez geniuszy z technologią lat 90-tych, czuję, że zadaję głupie pytania i po prostu mówię „dzięki” hehe.

Jednym z wymagań stron internetowych jest to, że są szybko dostępne, w przeciwieństwie do aplikacji, która może zająć trochę czasu i zjadać zasoby komputera, aby wszystko było poprawne przed wyświetleniem, strony internetowe wymagają niewielkich zasobów (więc pasują do każdego urządzenia to możliwe) i przewijaj je w mgnieniu oka.

Jeśli widzisz aplikacje ze złożonym przepływem i pozycjonowaniem, takie jak InDesign, nie możesz przewijać tak szybko! Przejście do następnych stron wymaga dużego wysiłku zarówno od procesorów, jak i karty graficznej!

Więc malowanie i kalkulowanie naprzód i zapominanie o narysowanym elemencie, na razie wydaje się MUSI.

Dopasowanie elementu iframe do kontenerów nie będzie odpowiadać rozmiarowi kontenera. Dodaje około 20 pikseli wypełnienia. Obecnie nie ma łatwego sposobu, aby to naprawić. Potrzebujesz javascript ( http://css-tricks.com/snippets/jquery/fit-iframe-to-content/ )

Ujemne marże byłyby łatwym rozwiązaniem.

Ponieważ projektanci CSS nie mieli przewidywania, aby wyobrazić sobie elastyczność, jaką to przyniesie. Istnieje wiele powodów, aby rozszerzyć obszar zawartości pudełka bez wpływu na jego relacje z sąsiednimi elementami. Jeśli uważasz, że nie jest to możliwe, umieść jakiś długi nowraptekst w ramce, ustaw szerokość ramki i obserwuj, jak przepełniona zawartość nie wpływa na układ.

Tak, jest to nadal aktualne w przypadku CSS3 w 2019 r .; Przykład: układy flexbox. Marginesy elementów Flexbox nie zwijają się, więc aby je równomiernie rozmieścić i wyrównać z wizualną krawędzią pojemnika, należy odjąć marginesy elementów od wypełnienia ich kontenera. Jeśli jakikolwiek wynik jest <0, musisz użyć ujemnego marginesu na kontenerze lub zsumować ten ujemny margines z istniejącym marginesem. To znaczy zawartość elementu wpływa na to, jak definiuje się dla niego marginesy, czyli odwrotnie. Sumowanie nie działa poprawnie, gdy zawartość elementów flex ma marginesy zdefiniowane w różnych jednostkach lub ma na nią inny rozmiar czcionki itp.

Poniższy przykład powinien, najlepiej mieć wyrównane i równomiernie rozmieszczone szare pola, ale niestety tak nie jest.

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>

Przez lata napotkałem wystarczająco dużo tych małych problemów, w których małe ujemne wypełnienie przeszłoby długą drogę, ale zamiast tego jestem zmuszony dodać niesemantyczne znaczniki, użycie calc()lub preprocesory CSS, które działają tylko wtedy, gdy jednostki są takie same itp.