inline-blockEl nombre de este tipo de despliegue está por cambiar.
De forma predeterminada, los elementos de formulario como
button,
o
input
tienen este tipo de despliegue, pero se puede cambiar.
Su contenido sigue las reglas de un display
block.
Sus padres lo ven como un elemento
inline,
pero el elemento ocupa un solo renglón del elemento padre más
próximo que sea
block o
inline-block.
| 1 | <!DOCTYPE html> |
| 2 | <html lang="es"> |
| 3 | <head> |
| 4 | <meta charset="UTF-8"> |
| 5 | <meta name="viewport" |
| 6 | content="width=device-width"> |
| 7 | <title>inline-block</title> |
| 8 | <style> |
| 9 | span { |
| 10 | display: inline-block; |
| 11 | background-color: yellow; |
| 12 | } |
| 13 | </style> |
| 14 | </head> |
| 15 | <body> |
| 16 | <p> |
| 17 | Texto, texto, texto |
| 18 | <span> |
| 19 | Este es un span forzado a ser |
| 20 | inline-block, inline-block, |
| 21 | inline-block, inline-block. |
| 22 | </span> |
| 23 | <button> |
| 24 | Este es un botón inline-block, |
| 25 | inline-block, inline-block. |
| 26 | </button> |
| 27 | </p> |
| 28 | </body> |
| 29 | </html> |