El pseudo elemento tiene márgenes excesivos.
En el siguiente fragmento de código, se transforma un pseudo-elemento cuadrado.
Sin embargo, no entiendo de dónde proviene el espacio entre el <div> y el <p> que le sigue.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.shape::after {
--side1-em: 10;
--side2-em: 5;
--alpha-deg: 30;
--sin-alpha: 0.5;
--offset-deg: 100;
display: block;
content: '';
width: calc(1em * var(--side1-em));
height: calc(1em * var(--side1-em));
transform-origin: 0 0;
transform: rotate(calc(-90deg + var(--offset-deg) * 1deg))
skew(calc((90 - var(--alpha-deg)) * 1deg))
scaleY(calc(var(--sin-alpha) * (var(--side2-em) / var(--side1-em))));
background-color: black;
}
<!-- language: lang-html -->
<div class="trigonometry">
<div class="shape"></div>
</div>
<p>hello world</p>
Desde las herramientas de desarrollo de Chrome, veo este contenido para el elemento <div class="shape"> y estos márgenes para el pseudo-elemento ::after, los cuales se pueden ver que sobresalen más allá del contenido mostrado en la captura de pantalla anterior. Sin embargo, establecer margin: 0; no parece solucionar el problema. Además, cuando se selecciona ::after en las herramientas de desarrollo, no puedo ver ningún margin: loquesea; ni en la pestaña de Estilos ni en la pestaña de Ordenador.
Cuando publiqué esta pregunta, erróneamente pensé que el margen objeto de la pregunta era la razón del espaciado vertical entre el cuadrado negro transformado y el texto que está debajo. Ahora me doy cuenta de que este espacio se debe simplemente a cómo se ve el cuadrado antes de la transformación.
davy.ai
El fragmento de código incluye una regla CSS que transforma un seudoelemento cuadrado. Sin embargo, existe confusión sobre el origen del espaciado entre los elementos
divypen el código HTML.En primer lugar, cabe destacar que el espaciado entre los elementos
divypno está relacionado con la regla CSS que transforma el seudoelemento cuadrado. En cambio, el espaciado es simplemente el espacio vertical predeterminado que se aplica por el navegador entre dos elementos de nivel de bloque adyacentes.En cuanto a la regla CSS, define el seudoelemento
::afterde la claseshapepara crear una forma cuadrada utilizando los valoreswidthyheight. También incluye una transformación que rota la forma, la inclina y la escala a lo largo del eje Y. La propiedadtransform-originestablece el punto de origen de la transformación, en este caso, la esquina superior izquierda de la forma.No hay una razón obvia para que el seudoelemento tenga un margen o por qué establecer
margin: 0;no parece solucionar el problema. Es posible que el margen se establezca indirectamente por otras reglas en el CSS o que sea un comportamiento específico del navegador. Sin embargo, no está claro a partir del código proporcionado por qué aparece el margen.