Cuando convertimos de PSD a HTML es fundamental que conozcamos las diferencias entre los tipos de elementos block y los inline, ya que de ellos dependerá el éxito de nuestra maquetación.
En este articulo te enseño las diferencias entre estos dos importantes elementos.
Como su nombre los indica, ya hay una definición en si, de cada tipo.
– Los elementos de tipo block, son elementos que forman un bloque separado.
– Lo de tipo inline, son aquellos que permanecen en línea con los demás elementos.
Vemos un poco mas en detalle cada elemento.
Los elementos de tipo block
Estos elementos poseen las siguientes características:
- Forma un bloque y se posiciona de forma vertical con un nuevo salto de línea.
- Las anchura es la máxima que puede tomar dentro de siu elemento contenedor (padre)
- La altura cambia en base al contenido que posea.
- Puede contener otros elementos de tipo inline y block
- Por medio de CSS se le puede aplicar una anchura y un altura fija.
Elemento que corresponden al tipo block:
Parrafos
<p>
Titulares
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
Cajas
<div>
Listas
<ul>, <ol>, <li>
Otros
<menú>, <dir>, <pre>, <hr>, <blockquote>, <address>, <center>, <noframes>, <isindex>, <fieldset>, <table>, <form>
Los elementos inline
Estos elementos poseen las siguientes características:
- Se posiciona horizontalmente en línea con los otros elementos.
- La altura y altura se define en base al contenido que posea.
- Solo puede contener elementos de tipo inline.
- No se puede aplicar una anchura y un altura fija por medio de CSS.
Elemento que por default corresponden al tipo inline:
<a>, <br>, <span>, <bdo>, <object>, <applet>, <img>, <map>, <iframe>, <tt>, <i>, <b>, <big>, <small>, <u>, <s>, <strike>, <Font>, <basefont>, <em>, <strong>, <dfn>, <code>, <q>, <sub>, <sup>, <samp>, <kbd>, <var>, <cite >, <abbr>, <acronym>, <input>, <select>, <textarea>, <label>, <button>
Por medio de CSS podremos alterar el tipo de elemento.
Esto lo logramos con las reglas display:block y display:inline, aplicándolas en cada elemento.
Por ejemplo, si quisiéramos cambiar el tipo de elemento block, a inline, en una etiqueta de elemento de lista <li>, lo haríamos así:
li {
display:inline;
}
Este ejemplo suele ser muy útil cuando queremos realizar menús donde cada elemento se posicione horizontalmente uno al lado del otro.
Si el menú estuviera realizado por ejemplo con listas <ul> y elementos de lista <li>, podemos aplicarle display:inline para evitar que los elementos <li> se posicionen uno debajo del otro como lo haría por defecto en toda lista.
De esta forma, se posicionarán uno al lado de otro.
Es sumamente importante saber diferenciar estos 2 tipos de elementos ya que de allí se desprenderá un código limpio y bien estructurado.
