¿Qué propiedades CSS no se pueden aplicar a Span?

Gracias por A2A,

Como todos sabemos que ‘ span’ es un elemento en línea. A diferencia de los elementos de nivel de bloque, no puede tomar márgenes verticales. Solo puede establecer márgenes horizontales. Por lo tanto, las propiedades ‘ margin-top ‘ y ‘ margin-bottom’ no funcionarán en elementos en línea, mientras que margin-left y margin-right funcionarán perfectamente bien.
Veamos el código:

lapso {
margen superior: 100 px;
borde: 3px azul aciano sólido;
}
pags {
borde: 5px carmesí sólido;
}

Hola mundo Blah

Aquí están los resultados:

Como puede ver en la captura de pantalla anterior, incluso después de aplicar margin-top: 100px; a nuestro elemento span no pasó nada.

Ahora, ¿cómo hacer que las propiedades margin-top y margin-bottom trabajen en elementos en línea (en este caso, ‘ span ‘)?

La solución es bastante simple, solo necesitamos hacer que estos elementos en línea actúen como elementos de nivel de bloque. Podemos lograr esto usando CSS ‘ display: inline-block;’ propiedad. En este caso, el elemento tomará margen de su elemento padre y también aumentará el tamaño del elemento padre. Veamos cómo:

lapso {
pantalla: bloque en línea;
margen superior: 100 px;
borde: 3px azul aciano sólido;
}
pags {
borde: 5px carmesí sólido;
}

Hola mundo Blah

Aquí están los resultados:

Ahora, nuestro elemento span ha tomado 100px de margen desde arriba y el tamaño de p también ha aumentado.

Otra solución es establecer las propiedades ‘ float: left’ o ‘ float: right’ . Al usarlos, el elemento en línea se comportará como un elemento independiente y puede modificarse independientemente, independientemente de su elemento padre.

lapso {
flotador izquierdo;
margen superior: 100 px;
borde: 3px azul aciano sólido;
}
pags {
borde: 5px carmesí sólido;
}

Hola mundo Blah

Aquí están los resultados después de aplicar flotante: izquierda,

Aquí, después de aplicar float: left, podemos ver que el tamaño de p se mantuvo igual y el span se alejó 100px de la parte superior.

Los elementos en línea no pueden tomar propiedades de ancho y alto también.

Espero eso ayude.

Gracias

En la mayoría de los casos, puede aplicar los estilos que desee a cualquier elemento (hay algunas excepciones). Pero el problema es que es semánticamente correcto, por ejemplo, el elemento span se usa más comúnmente para texto, ya que su propiedad de visualización es lo que se conoce como “en línea”.

Con la propiedad de visualización en línea no puede aplicar margen en el eje y, arriba o abajo, esto se puede cambiar, aunque como digo puede modificar las propiedades de un elemento, si simplemente le da a un span una propiedad de bloque de visualización, se convertirá efectivamente en un div.

Sin embargo, un tramo que es un bloque no es técnicamente correcto ya que no puede anidar un div dentro de él. Esto es diferente del div y algunos otros elementos que son del tipo de pantalla “bloque”.