Pourquoi CSS ne supporte-t-il pas le padding négatif?
J'ai vu cela maintes fois que la perspective d'un remplissage négatif pourrait aider le développement de CSS de certains éléments de page à devenir meilleur et plus facile. Pourtant, il n'y a aucune disposition pour un remplissage négatif dans le CSS du W3C. Quelle est la raison derrière cela? Y at-il un obstacle à la propriété qui empêche son utilisation en tant que telle? Merci pour vos réponses.
METTRE À JOUR
Comme je vois, par exemple, si vous utilisez une police qui a quelque chose, disons, un espacement vertical de 20 pixels et que vous souhaitez appliquer une bordure en pointillé au bas de la police, par exemple lorsqu'un hyperlien apparaît. Dans ce cas, vous constaterez que le style est trop dégradé, car la bordure en pointillés apparaîtra 20 fois sous le mot spécifié. si vous utilisez une marge négative, cela ne fonctionnera pas, car la marge modifie la zone en dehors des frontières. Un rembourrage négatif peut aider dans de telles situations.
J'ai récemment répondu à une question différente où j'ai discuté de pourquoi le modèle de boîte est ce qu'il est.
Il existe des raisons spécifiques pour chaque partie du modèle de boîte. Le rembourrage est destiné à étendre l'arrière-plan au-delà de son contenu. Si vous avez besoin de réduire l'arrière-plan du conteneur, vous devez redimensionner le conteneur parent et lui donner des marges négatives. Dans ce cas, le contenu n'est pas padded, il déborde.
Le rembourrage par définition est un entier positif (y compris 0).
Un remplissage négatif entraînerait la réduction de la bordure dans le contenu (voir la page box-model sur w3). Cela réduirait la zone de contenu par rapport au contenu, ce qui n'a pas de sens.
Je voudrais décrire un très bon exemple de la raison pour laquelle negative padding serait utile et génial.
Comme nous le savons tous, développeurs CSS, il est fastidieux d’aligner une division dynamique de dimensionnement au sein d’une autre. Cela est considéré comme impossible sans l’utilisation de CSS. L'incorporation de negative padding pourrait changer cela.
Veuillez réviser le code HTML suivant:
<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>
Avec le CSS suivant, nous pourrions centrer verticalement le contenu de la div intérieure dans la div extérieure:
.vertical-align {
position: absolute;
top:50%;
padding-top:-50%;
overflow: visible;
}
Permettez-moi de vous expliquer ...
Positionner absolument le sommet de la division interne à 50% place le bord supérieur de la division interne au centre de la division externe. Assez simple. En effet, le positionnement basé sur pourcentage est relatif aux dimensions internes de l'élément parent.
Le remplissage basé sur un pourcentage, d'autre part, est basé sur les dimensions internes de l'élément ciblé. Ainsi, en appliquant la propriété de padding-top: -50%;, nous avons décalé le contenu de la div interne d'une distance de 50% de la hauteur du contenu de la div interne, centrant ainsi le contenu de la div interne dans la div externe et permettant toujours la hauteur dimension de la division intérieure pour être dynamique!
Si vous me demandez OP, ce serait le meilleur des cas d'utilisation, et je pense qu'il devrait être mis en œuvre juste pour que je puisse le faire. lol. Ou bien, ils devraient simplement corriger la fonctionnalité de vertical-align et nous donner une version de vertical-align qui fonctionne sur tous les éléments.
Cela pourrait aider, au fait:
La propriété CSS box-sizing permet de modifier le modèle de boîte CSS par défaut utilisé pour calculer les largeurs et les hauteurs des éléments.
http://www.w3.org/TR/css3-ui/#box-sizing
https://developer.mozilla.org/En/CSS/Box-sizing
Vous avez demandé POURQUOI, pas comment le tromper:
Habituellement, cela tient à la paresse des programmeurs de la mise en œuvre initiale, parce qu'ils ont déjà déployé beaucoup plus d'efforts dans d'autres fonctionnalités, produisant des effets secondaires plus étranges comme les flottants, car ils étaient davantage sollicités par les concepteurs à l'époque et pourtant ils n'ont pas pris le temps pour permettre cela afin que nous puissions utiliser les propriétés FOUR pour pousser/tirer un élément contre ses voisins (maintenant nous n’avons plus que quatre à pousser, et seulement 2 à tirer).
Quand le html a été conçu, les magazines adoraient refaire le texte autour des images à l’époque. Ils étaient maintenant détestés, car nous avons aujourd’hui des tendances tactiles et adorons les choses de squary avec beaucoup d’espace et rien à lire. C'est pourquoi ils mettent plus de pression sur les flottants que sur le centrage, ou ils auraient pu concevoir quelque chose comme margin-top: fill; ou margin: average 0; pour aligner simplement le contenu vers le bas ou répartir son espace supplémentaire.
Dans ce cas, je pense que cela n’a pas été implémenté pour la même raison qui fait que CSS manque d’un pseudo-sélecteur :parent: pour empêcher les évaluations en boucle.
Sans être un ingénieur, je peux voir que CSS est actuellement appliqué aux éléments Paint, souvenez-vous de certaines propriétés des éléments à peindre, mais ne revenez jamais à des éléments déjà peints.
C'est pourquoi (je suppose) que le remplissage est calculé sur la largeur, car c'est la valeur disponible au moment de commencer à peindre.
Si vous avez une valeur négative pour le remplissage, cela affectera les limites extérieures, qui ont déjà été définies lorsque la marge a déjà été définie. Je sais que rien n'a encore été peint, mais quand vous lisez le processus de peinture créé par des génies dotés de la technologie des années 90, j'ai l'impression de poser des questions idiotes et de simplement dire "merci" hehe.
L'une des exigences des pages Web est qu'elles soient rapidement disponibles. Contrairement à une application qui prend du temps et consomme les ressources informatiques pour que tout soit correct avant de l'afficher, les pages Web doivent utiliser peu de ressources (elles doivent donc être adaptées à chaque appareil). possible) et faire défiler dans une brise.
Si vous voyez des applications à refusion et positionnement complexes, comme InDesign, vous ne pouvez pas faire défiler aussi vite! Les processeurs et les cartes graphiques demandent un gros effort pour passer aux pages suivantes!
Donc, peindre et calculer en avant et oublier un élément une fois dessiné, pour le moment, cela semble être une nécessité.
Parce que les concepteurs de CSS n'avaient pas la clairvoyance d'imaginer la flexibilité que cela apporterait. Il y a de nombreuses raisons d'étendre la zone de contenu d'une boîte sans affecter ses relations avec les éléments voisins. Si vous pensez que ce n'est pas possible, mettez du texte nowrap 'd long dans une boîte, définissez une largeur sur la boîte et observez comment le contenu débordé ne modifie en rien la mise en page.
Oui, cela reste d'actualité avec CSS3 en 2019; exemple: les schémas flexbox. Les marges des éléments Flexbox ne sont pas réduites. Par conséquent, pour les espacer de manière égale et, alignez-les sur le bord visuel du conteneur, il faut soustraire les marges des éléments du remplissage de leur conteneur. Si un résultat est <0, vous devez utiliser une marge négative sur le conteneur ou additionner cette valeur à la marge existante. C'est à dire. le contenu de l'élément influe sur la manière dont on définit les marges pour cet élément, c'est-à-dire vers l'arrière. La synthèse ne fonctionne pas correctement lorsque le contenu des éléments flexibles a des marges définies dans des unités différentes ou est affecté par une taille de police différente, etc.
L'exemple ci-dessous devrait idéalement avoir des zones grises alignées et régulièrement espacées, mais malheureusement, elles ne le sont pas.
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>Au cours des années, j’ai rencontré assez de problèmes mineurs au cours desquels un remplissage négatif aurait été très utile, mais je suis obligé d’ajouter du balisage non sémantique, d’utiliser calc() ou des préprocesseurs CSS qui ne fonctionnent que lorsque les unités idem, etc.
L'installation d'un Iframe dans des conteneurs ne correspondra pas à la taille du conteneur. Il ajoute environ 20px de remplissage. Actuellement, il n'y a pas de moyen facile de résoudre ce problème. Vous avez besoin de javascript ( http://css-tricks.com/snippets/jquery/fit-iframe-to-content/ )
Les marges négatives seraient une solution facile.