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;
}
- ¿Cómo construiría un sistema de pago para mi servicio web?
- ¿Qué proveedor de alojamiento web utiliza y por qué?
- ¿Qué es un buen ASP.NET MVC CMS como un buen punto de partida para un proyecto?
- ¿Se pueden volver a crear sitios web como Facebook?
- ¿Cuál es el marco mejor o más fácil para PHP?
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