1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
|
---
title: Elementos en línea
slug: Web/HTML/Elementos_en_línea
tags:
- Guía
- HTML
- HTML5
- Principiante
- Web
- desarrollo
translation_of: Web/HTML/Inline_elements
---
<p><span class="seoSummary">Los elementos en HTML (lenguaje de marcas de hipertexto - <strong>Hypertext Markup Language</strong>) usualmente son elementos "en línea" o <a href="/es/docs/Web/HTML/Block-level_elements" title="/es/docs/Web/HTML/Block-level_elements">elementos "en bloque"</a>. Un elemento en línea ocupa sólo el espacio delimitado por las etiquetas que definen el elemento en línea. El siguiente ejemplo demuestra la influencia de los elementos en línea:</span></p>
<h2 id="Inline_example" name="Inline_example">Ejemplo en línea</h2>
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><p>Este <span>span</span> es un elemento en línea; este fondo se ha coloreado para mostrar el principio y fin de la influencia del elemento en línea</p></pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: css">span { background-color: #8ABB55; }
</pre>
<p>{{ EmbedLiveSample('Inline_example') }}</p>
<h2 id="Elmentos_en_línea_vs._en_bloque">Elmentos en línea vs. en bloque</h2>
<dl>
<dt>Formateo</dt>
<dd>De forma predeterminada, los elementos en línea no comienzan con la nueva línea.</dd>
<dt>Modelo de contenido</dt>
<dd>En general, los elementos en línea pueden contener únicamente los datos y otros elementos en línea.</dd>
</dl>
<h2 id="Elementos">Elementos</h2>
<p>Los siguientes elementos son "en línea":</p>
<ul id="inline-elements">
<li><a href="/es/docs/Web/HTML/Elemento/b" title="/es/docs/Web/HTML/Elemento/b">b</a>, <a href="/es/docs/Web/HTML/Elemento/big" title="/es/docs/Web/HTML/Elemento/big">big</a>, <a href="/es/docs/Web/HTML/Elemento/i" title="/es/docs/Web/HTML/Elemento/i">i</a>, <a href="/es/docs/Web/HTML/Elemento/small" title="/es/docs/Web/HTML/Elemento/small">small</a>, <a href="/es/docs/Web/HTML/Elemento/tt" title="/es/docs/Web/HTML/Elemento/tt">tt</a></li>
<li><a href="/es/docs/Web/HTML/Elemento/abbr" title="/es/docs/Web/HTML/Elemento/abbr">abbr</a>, <a href="/es/docs/Web/HTML/Elemento/acronym" title="/es/docs/Web/HTML/Elemento/acronym">acronym</a>, <a href="/es/docs/Web/HTML/Elemento/cite" title="/es/docs/Web/HTML/Elemento/cite">cite</a>, <a href="/es/docs/Web/HTML/Elemento/code" title="/es/docs/Web/HTML/Elemento/code">code</a>, <a href="/es/docs/Web/HTML/Elemento/dfn" title="/es/docs/Web/HTML/Elemento/dfn">dfn</a>, <a href="/es/docs/Web/HTML/Elemento/em" title="/es/docs/Web/HTML/Elemento/em">em</a>, <a href="/es/docs/Web/HTML/Elemento/kbd" title="/es/docs/Web/HTML/Elemento/kbd">kbd</a>, <a href="/es/docs/Web/HTML/Elemento/strong" title="/es/docs/Web/HTML/Elemento/strong">strong</a>, <a href="/es/docs/Web/HTML/Elemento/samp" title="/es/docs/Web/HTML/Elemento/samp">samp</a>, <a href="/es/docs/Web/HTML/Elemento/time" title="/es/docs/Web/HTML/Elemento/time">time</a>, <a href="/es/docs/Web/HTML/Elemento/var" title="/es/docs/Web/HTML/Elemento/var">var</a></li>
<li><a href="/es/docs/Web/HTML/Elemento/a" title="/es/docs/Web/HTML/Elemento/a">a</a>, <a href="/es/docs/Web/HTML/Elemento/bdo" title="/es/docs/Web/HTML/Elemento/bdo">bdo</a>, <a href="/es/docs/Web/HTML/Elemento/br" title="/es/docs/Web/HTML/Elemento/br">br</a>, <a href="/es/docs/Web/HTML/Elemento/Img" title="/es/docs/Web/HTML/Elemento/Img">img</a>, <a href="/es/docs/Web/HTML/Elemento/map" title="/es/docs/Web/HTML/Elemento/map">map</a>, <a href="/es/docs/Web/HTML/Elemento/object" title="/es/docs/Web/HTML/Elemento/object">object</a>, <a href="/es/docs/Web/HTML/Elemento/q" title="/es/docs/Web/HTML/Elemento/q">q</a>, <a href="/es/docs/Web/HTML/Elemento/Script" title="/es/docs/Web/HTML/Elemento/Script">script</a>, <a href="/es/docs/Web/HTML/Elemento/span" title="/es/docs/Web/HTML/Elemento/span">span</a>, <a href="/es/docs/Web/HTML/Elemento/sub" title="/es/docs/Web/HTML/Elemento/sub">sub</a>, <a href="/es/docs/Web/HTML/Elemento/sup" title="/es/docs/Web/HTML/Elemento/sup">sup</a></li>
<li><a href="/es/docs/Web/HTML/Elemento/button" title="/es/docs/Web/HTML/Elemento/button">button</a>, <a href="/es/docs/Web/HTML/Elemento/Input" title="/es/docs/Web/HTML/Elemento/Input">input</a>, <a href="/es/docs/Web/HTML/Elemento/label" title="/es/docs/Web/HTML/Elemento/label">label</a>, <a href="/es/docs/Web/HTML/Elemento/select" title="/es/docs/Web/HTML/Elemento/select">select</a>, <a href="/es/docs/Web/HTML/Elemento/textarea" title="/es/docs/Web/HTML/Elemento/textarea">textarea</a></li>
</ul>
<h3 id="Ver_también" name="Ver_también">Ver también</h3>
<ul>
<li><a href="/es/docs/Web/HTML/Block-level_elements" title="/es/docs/Web/HTML/Block-level_elements">Elementos en bloque</a></li>
</ul>
|
