inline
Solo contiene elementos de tipo
inline,
inline-block
y texto.
De forma predeterminada, los elementos de fraseo como
span,
em,
del,
o
strong
tienen este tipo de despliegue, pero se puede cambiar.
El contenido se despliega de forma horizontal, uno tras otro. Si
llega al final del elemento padre más próximo que sea
block o
inline-block,
continuá al inicio del siguiente renglón.
| 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</title> |
| 8 | <style> |
| 9 | p { |
| 10 | display: inline; |
| 11 | color: olive |
| 12 | } |
| 13 | </style> |
| 14 | </head> |
| 15 | <body> |
| 16 | <div> |
| 17 | El texto es inline. |
| 18 | El texto es inline. |
| 19 | El texto es inline. |
| 20 | El texto es inline. |
| 21 | El texto es inline. |
| 22 | <span>El span es inline.</span> |
| 23 | <p> |
| 24 | Este párrafo es forzado a ser |
| 25 | inline. |
| 26 | </p> |
| 27 | <em> |
| 28 | Esto es texto con énfasis. |
| 29 | </em> |
| 30 | <strong> |
| 31 | Esto es texto con énfasis |
| 32 | fuerte. |
| 33 | </strong> |
| 34 | Más texto. |
| 35 | Más texto. |
| 36 | Más texto. |
| 37 | Más texto. |
| 38 | </div> |
| 39 | </body> |
| 40 | </html> |