Dlaczego CSS nie obsługuje negatywowego wypełnienia?

Question

Widziałem tak wiele razy, że perspektywa negatywnego dopełnienia może pomóc w ulepszeniu CSS niektórych elementów strony, które staną się lepsze i łatwiejsze. Jednak w W3C CSS nie ma przepisu na negatywne wypełnienie. Jaki jest tego powód? Czy istnieje przeszkoda dla nieruchomości, która uniemożliwia jej wykorzystanie jako takiej? Dziękuję za odpowiedzi.

UPDATE

Jak widzę, na przykład, w przypadku używasz czcionki, która ma coś, powiedzmy, 20px z odstępem pionowym, a chcesz zastosować przerywaną ramkę do dołu 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 pomocne może być wypełnianie negatywne.

Answer 1

Niedawno answered a different question gdzie omówiłem dlaczego model pudełka jest taki, jaki jest.

Istnieją konkretne powody dla każdej części modelu pudełkowego. Wypełnienie ma na celu rozszerzenie tła poza jego zawartość. Jeśli chcesz zmniejszyć tło kontenera, powinieneś ustawić kontener nadrzędny na prawidłowy rozmiar i nadać elementowi potomnemu trochę marginesu ujemnego. W tym przypadku treść nie jest wyściełana, jest przepełniona.

Answer 2

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

Ucisk negatywny spowodowałby, że granica zapadłaby się w treści (zobacz stronę box-model na w3) - to spowodowałoby, że obszar zawartości byłby mniejszy niż treść, co nie ma sensu.

Answer 3

Jaki byłby cel negatywnego wypełnienia? Wypełnienie służy do zmniejszania zawartości w pudełku, pozostawiając przestrzeń między obramowaniem a treścią. Chyba że celem jest wyciągnięcie zawartości poza jej pole poza jej granice, co nie jest przydatne. Być może ktoś ma inną opinię.

Answer 4

To może pomóc, przy okazji:

box-zaklejania nieruchomość CSS służy do zmiany modelu polu Domyślny CSS używany 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

Answer 5

Montaż iframe wewnątrz pojemników nie będzie pasował do wielkości pojemnika. Dodaje około 20 pikseli wypełnienia. Obecnie nie ma prostego sposobu na rozwiązanie tego problemu. Potrzebujesz javascript (http://css-tricks.com/snippets/jquery/fit-iframe-to-content/)

Ujemne marginesy byłyby łatwym rozwiązaniem.

Answer 6

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

Jak wszyscy wiemy, programiści CSS wiedzą, że wyrównanie w pionie dynamicznego rozmiaru div w innym jest utrudnieniem i w przeważającej części jest postrzegane jako niemożliwe tylko przy użyciu CSS. Włączenie negative padding może to zmienić.

Proszę przejrzeć następujące 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> 

z następującymi CSS, bylibyśmy w stanie pionowo wyśrodkować zawartość wewnętrznej div wewnątrz zewnętrznej div:

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

pozwala mi wyjaśnić ...

Absolutne pozycjonowanie wewnętrznej części dziąsłowej przy 50% umieszcza górną krawędź wewnętrznego dzioba w środku zewnętrznego div. Dość proste. Wynika to z faktu, że pozycjonowanie oparte na wartości procentowej zależy od wewnętrznych wymiarów elementu nadrzędnego.

Procentowe wypełnienie podstawie, z drugiej strony, opiera się na wewnętrznych wymiarów ukierunkowanego elementu. Tak więc, stosując właściwość padding-top: -50%;, przesunęliśmy zawartość wewnętrznego div w górę o odległość 50% wysokości wewnętrznej zawartości div, dlatego centrowanie zawartości wewnętrznego div w zewnętrznym div i nadal pozwala na wymiar wysokości wewnętrznego div jest dynamiczny!

Jeśli poprosisz mnie o OP, będzie to najlepszy przypadek użycia i myślę, że powinien on zostać wdrożony tylko po to, abym mógł to zrobić. lol. Lub powinny po prostu naprawić funkcjonalność vertical-align i dać nam wersję vertical-align, która działa na wszystkich elementach.

Answer 7

zapytałem dlaczego, nie jak go oszukać:

zwykle z powodu lenistwa programistów początkowej implementacji, ponieważ już umieścić sposób więcej wysiłku w innych funkcji, dostarczając bardziej dziwne efekty uboczne, takie jak pływaków, ponieważ byli wtedy bardziej poszukiwani przez projektantów, a jednak nie poświęcili czasu, aby to umożliwić, abyśmy mogli użyć CZTERECH własności, aby naciskać/ciągnąć element przeciwko sąsiadom (teraz mamy tylko cztery do popchnięcia, a tylko 2 do Ciągnąć).

Gdy zaprojektowano HTML, czasopisma uwielbiały w tym czasie tekst zawijany wokół obrazów, teraz znienawidzony, ponieważ dziś mamy trendy doty- kowe i uwielbiamy rzeczy skromne z dużą ilością miejsca i nic do czytania. Dlatego kładą większy nacisk na pływaki, niż na centrowanie, lub mogli zaprojektować coś w rodzaju margin-top: fill; lub margin: average 0;, aby po prostu wyrównać zawartość do dołu lub rozdzielić jej dodatkową przestrzeń wokół.

W tym przypadku myślę, że nie została ona zaimplementowana z tego samego powodu, dla którego CSS nie ma pseudo-selektora :parent: Aby zapobiec analizowaniu pętli.

Nie będąc inżynierem, widzę, że obecnie CSS jest malowany na elementach, pamiętaj o niektórych właściwościach przyszłych elementów, które mają być malowane, ale NIGDY nie wracam do już pomalowanych elementów.

Dlatego właśnie (jak sądzę) wyściółka jest obliczana na podstawie szerokości, ponieważ jest to wartość dostępna w momencie rozpoczynania jej malowania.

Jeśli miałeś ujemną wartość wypełnienia, wpłynęłoby to na zewnętrzne limity, które JUŻ zostały zdefiniowane, gdy margines został już ustawiony. Wiem, nic jeszcze 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 "dziękuję" hehe.

Jednym z wymagań stron internetowych jest to, że są one szybko dostępne, w przeciwieństwie do aplikacji, która może trochę czasu i jeść zasoby komputerowe, aby wszystko było poprawne przed wyświetleniem, strony internetowe muszą zużywać mało zasobów (więc są pasuje do każdego możliwego urządzenia) i przewija się na wietrze.

Jeśli widzisz aplikacje o złożonym przepływie i pozycjonowaniu, takie jak InDesign, nie możesz przewijać tak szybko! Wymaga to dużego wysiłku zarówno od procesorów, jak i karty graficznej, aby przejść do następnych stron!

Tak więc malowanie i obliczanie do przodu i zapomnienie o element raz narysowany, na razie wydaje się być koniecznością.