{"id":7016,"date":"2017-12-21T14:52:30","date_gmt":"2017-12-21T12:52:30","guid":{"rendered":"https:\/\/www.espai.es\/blog\/?p=7016"},"modified":"2017-12-22T12:32:59","modified_gmt":"2017-12-22T10:32:59","slug":"elementos-en-bloque-y-linea","status":"publish","type":"post","link":"https:\/\/www.espai.es\/blog\/2017\/12\/elementos-en-bloque-y-linea\/","title":{"rendered":"Elementos en bloque y l\u00ednea en html (Gu\u00eda definitiva)"},"content":{"rendered":"<p>Bienvenidos a un nuevo post de la Escola Espai. Hoy quiero hablaros de un problema que me encuentro con mucha regularidad en las clases de maquetaci\u00f3n en html y css: el tratamiento de los elementos en bloque y l\u00ednea. Este post pretende ser una gu\u00eda definitiva para aprender a diferenciarlos, y as\u00ed trabajar con ellos correctamente en css. Aprenderemos a mover elementos, colocarlos uno al lado de otro, centrarlos, etc. As\u00ed podremos estructurar sin problemas nuestras p\u00e1ginas web, evitando jaquecas y comportamientos extra\u00f1os de nuestros elementos html.<\/p>\n<h2>\u00bfEn qu\u00e9 se diferencian los elementos en bloque y l\u00ednea?<\/h2>\n<p>No es dif\u00edcil entender qu\u00e9 los diferencia. Normalmente los alumnos lo entienden a la perfecci\u00f3n a la primera. B\u00e1sicamente, cuando maquetamos en html construimos \u00abcajas\u00bb y dentro de \u00e9stas ponemos el contenido. Estas \u00abcajas\u00bb\u00a0son lo que conocemos como elementos de tipo bloque. Dependiendo de la etiqueta que hayamos usado para crear un bloque, tendr\u00e1 un significado u otro para el navegador. No es lo mismo usar un div (divis\u00f3n) que un h1 (t\u00edtulo), pero en cierto modo -y estrictamente en t\u00e9rminos de maquetaci\u00f3n- ambas etiquetas crean una caja.<\/p>\n<p>Debemos entender que los bloques jam\u00e1s van a permitir que haya nada a su lado. Aunque haya espacio. Nunca podremos colocar nada junto a un elemento en bloque. Por ello, en una web sin formato todos los elementos se ordenan de forma vertical. Los elementos en bloque crean saltos de l\u00ednea y esto es debido a que siempre ocupar\u00e1n el 100% del ancho. Si le dices a un bloque que ocupe un ancho determinado en p\u00edxeles (width: 200px; por ejemplo), dar\u00e1 lo mismo: crear\u00e1 un margen a su lado que impedir\u00e1 que cualquier elemento se ponga junto a \u00e9l.<\/p>\n<p>Etiquetas en bloque tenemos muchas. Las m\u00e1s conocidas son el div, los t\u00edtulos (del h1 al h6), las p, las listas ul con sus elementos de lista li&#8230; Aqu\u00ed os dejo un enlace con todas las etiquetas tipo bloque que existen:\u00a0<a href=\"https:\/\/developer.mozilla.org\/es\/docs\/Web\/HTML\/Block-level_elements\">https:\/\/developer.mozilla.org\/es\/docs\/Web\/HTML\/Block-level_elements<\/a>.<\/p>\n<p>Por otro lado, tenemos los elementos en l\u00ednea.\u00a0Si los elementos en bloque eran el contenedor, debemos tratar a los elementos en l\u00ednea como contenido. De la misma forma que una letra se coloca al lado de otra cuando escribimos un texto, cuando colocamos un elemento en l\u00ednea junto a otro se colocar\u00e1 a su lado siempre que el ancho de pantalla lo permita. Podemos tratar a los elementos en l\u00ednea como si fuera texto. No est\u00e1n pensados para ser contenedores, sino que son contenido por ellos mismos. As\u00ed pues, un elemento en l\u00ednea s\u00f3lo ocupa lo estrictamente necesario, no el 100% como s\u00ed ocurre con los bloques.<\/p>\n<p>Debemos entender las diferencias entre ambos elementos para poder crear nuestras estructuras con css. No podemos tratar por igual a un elemento en bloque y en l\u00ednea, es uno de los errores m\u00e1s comunes cuando se comienza a maquetar.<\/p>\n<h2>Creando estructuras con css<\/h2>\n<p>Ya sabemos que un bloque jam\u00e1s va a permitir que un elemento se posicione a su lado. Si queremos que esto ocurra, deber\u00edamos transformar el bloque en otra cosa, \u00bfno es de l\u00f3gica?<\/p>\n<p>Por ejemplo, podr\u00edamos transformarlo en un elemento flotante con la propiedad <em>float<\/em>; o hacer que un elemento en bloque se vuelva del tipo l\u00ednea. Gracias a esta transformaci\u00f3n un bloque permitir\u00e1 que hayan otros elementos a su lado. As\u00ed\u00a0crearemos estructuras con columnas y ganaremos horizontalidad en nuestros dise\u00f1os. Sin embargo, al transformar nuestros elementos bloque ganar\u00e1n una serie de propiedades con las que quiz\u00e1 no hayamos contado, y\u00a0sino somos conscientes de esto nos encontraremos con comportamientos extra\u00f1os que agotar\u00e1n nuestra paciencia.<\/p>\n<h2>Los problemas de la flotaci\u00f3n<\/h2>\n<p>Cuando ense\u00f1o a flotar elementos en html siempre repito un mantra: cuando us\u00e9is flotaciones <strong>SIEMPRE vamos a ponerle un <em>overflow:auto\u00a0<\/em>al contenedor<\/strong>. Esto\u00a0puede servir para aquellos que se inician en maquetaci\u00f3n y no acaban de comprender c\u00f3mo funciona el <em>stacking order<\/em> de css. Gracias a esta norma podemos evitar comportamientos extra\u00f1os en el dise\u00f1o. Sin embargo cuando una regla carece de sentido y la aplicamos simplemente porque nos la ha dicho el profesor, puede ser que se nos olvide o que la apliquemos de forma incorrecta.<\/p>\n<p>!Pero eso se acab\u00f3\u00a1 En alg\u00fan punto dejamos de ser principiantes, \u00bfno? Si entendemos lo siguiente podremos estructurar de manera mucho m\u00e1s efectiva.<\/p>\n<p><strong>Cuando le damos <em>float<\/em> a un bloque deja de ser un bloque.\u00a0<\/strong>Se convierte en un elemento flotante. Los dem\u00e1s bloques dejar\u00e1n de reconocerlo y por lo tanto ocupar\u00e1n el espacio que ha dejado libre nuestro nuevo elemento flotante. Ah\u00ed es cuando nuestra web se estar\u00e1 comportando de manera \u00abextra\u00f1a\u00bb. Porque cuando flotamos un bloque de html estamos perdiendo el \u00e1rea que ocupaba ese bloque.<\/p>\n<p>Esto puede causar lo siguiente:<\/p>\n<p>1- Que un contenedor pierda su contenido. Si flotamos todo lo que hay dentro de un contenedor este se quedar\u00e1 vac\u00edo, porque recordemos que un bloque no reconoce a los elementos flotantes (es como si no existieran). <strong>Debemos evitar esto a toda costa.<\/strong> \u00bfC\u00f3mo? Con <em>overflow:auto<\/em>. Con esta regla de css le estaremos diciendo a un contenedor que recoja todo el contenido que sobresalga de \u00e9ste. As\u00ed el contenedor reconocer\u00e1 de nuevo el contenido y los dem\u00e1s elementos volver\u00e1n a ocupar el \u00e1rea que les toca.<\/p>\n<p>2- Que otros bloques ocupen el espacio que no les toca. Tambi\u00e9n puede ocurrir que si dentro de un contenedor tenemos algunos bloques que flotan y otros que no, nos sucedan cosas extra\u00f1as. Ya os pod\u00e9is imaginar por qu\u00e9. Nuevamente lo mismo: los bloques que no flotan no reconocen a los que s\u00ed. Para solucionarlo\u00a0tenemos la regla <em>clear:both.\u00a0<\/em>Con esta regla limpiamos las flotaciones y\u00a0as\u00ed los bloques\u00a0respetar\u00e1n el espacio de los elementos flotantes que encuentren antes que ellos.<\/p>\n<h2>\u00daltimo consejo<\/h2>\n<p>!Wow\u00a1 No era tan d\u00edficil, \u00bfo s\u00ed? S\u00e9 que a algunos a\u00fan les parecer\u00e1 algo denso. La verdad es que puede llegar a ser algo bastante abstracto, pero una vez se ha entendido la idea es lo m\u00e1s f\u00e1cil del mundo. Creedme.<\/p>\n<p>S\u00f3lo me queda un \u00faltimo consejo para aquellos que no lo hayan entendido: practicad mucho. Probad de hacer estructuras, poned y quitad flotaciones, overflows, etc. As\u00ed hasta que entend\u00e1is la filosof\u00eda que se esconde detr\u00e1s de todo esto. Una vez lo hay\u00e1is entendido podr\u00e9is maquetar webs en un abrir y cerrar de ojos.<\/p>\n<p>\u00a1Mucho \u00e1nimo!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Bienvenidos a un nuevo post de la Escola Espai. Hoy quiero hablaros de un problema que me encuentro con mucha regularidad en las clases de maquetaci\u00f3n en html y css: el tratamiento de los elementos en bloque y l\u00ednea. Este post pretende ser una gu\u00eda&#8230;<\/p>\n","protected":false},"author":26,"featured_media":7022,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_ef_editorial_meta_date_first-draft-date":"","_ef_editorial_meta_paragraph_assignment":"","_ef_editorial_meta_checkbox_needs-photo":"","_ef_editorial_meta_number_word-count":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[7],"tags":[12,13,52,14,78,164],"class_list":["post-7016","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno-web","tag-css","tag-css3","tag-diseno","tag-diseno-web-2","tag-html5","tag-web"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Elementos en bloque y l\u00ednea en html (Gu\u00eda definitiva) - Blog Escola Espai<\/title>\n<meta name=\"description\" content=\"Hoy quiero hablaros de un problema que me encuentro con mucha regularidad en las clases de maquetaci\u00f3n en html y css: los elementos en bloque y l\u00ednea.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.espai.es\/blog\/2017\/12\/elementos-en-bloque-y-linea\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Elementos en bloque y l\u00ednea en html (Gu\u00eda definitiva) - Blog Escola Espai\" \/>\n<meta property=\"og:description\" content=\"Hoy quiero hablaros de un problema que me encuentro con mucha regularidad en las clases de maquetaci\u00f3n en html y css: los elementos en bloque y l\u00ednea.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.espai.es\/blog\/2017\/12\/elementos-en-bloque-y-linea\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog Escola Espai\" \/>\n<meta property=\"article:published_time\" content=\"2017-12-21T12:52:30+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-12-22T10:32:59+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2017\/12\/block-size.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1500\" \/>\n\t<meta property=\"og:image:height\" content=\"1059\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Paco Luque\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Paco Luque\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.espai.es\/blog\/2017\/12\/elementos-en-bloque-y-linea\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2017\/12\/elementos-en-bloque-y-linea\/\"},\"author\":{\"name\":\"Paco Luque\",\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/2147604b486e1347f6e764b0d3964725\"},\"headline\":\"Elementos en bloque y l\u00ednea en html (Gu\u00eda definitiva)\",\"datePublished\":\"2017-12-21T12:52:30+00:00\",\"dateModified\":\"2017-12-22T10:32:59+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2017\/12\/elementos-en-bloque-y-linea\/\"},\"wordCount\":1135,\"commentCount\":2,\"image\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2017\/12\/elementos-en-bloque-y-linea\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2017\/12\/block-size.jpg\",\"keywords\":[\"CSS\",\"CSS3\",\"dise\u00f1o\",\"dise\u00f1o web\",\"HTML5\",\"web\"],\"articleSection\":[\"Dise\u00f1o Web\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.espai.es\/blog\/2017\/12\/elementos-en-bloque-y-linea\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.espai.es\/blog\/2017\/12\/elementos-en-bloque-y-linea\/\",\"url\":\"https:\/\/www.espai.es\/blog\/2017\/12\/elementos-en-bloque-y-linea\/\",\"name\":\"Elementos en bloque y l\u00ednea en html (Gu\u00eda definitiva) - Blog Escola Espai\",\"isPartOf\":{\"@id\":\"https:\/\/www.espai.es\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2017\/12\/elementos-en-bloque-y-linea\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2017\/12\/elementos-en-bloque-y-linea\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2017\/12\/block-size.jpg\",\"datePublished\":\"2017-12-21T12:52:30+00:00\",\"dateModified\":\"2017-12-22T10:32:59+00:00\",\"author\":{\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/2147604b486e1347f6e764b0d3964725\"},\"description\":\"Hoy quiero hablaros de un problema que me encuentro con mucha regularidad en las clases de maquetaci\u00f3n en html y css: los elementos en bloque y l\u00ednea.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2017\/12\/elementos-en-bloque-y-linea\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.espai.es\/blog\/2017\/12\/elementos-en-bloque-y-linea\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.espai.es\/blog\/2017\/12\/elementos-en-bloque-y-linea\/#primaryimage\",\"url\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2017\/12\/block-size.jpg\",\"contentUrl\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2017\/12\/block-size.jpg\",\"width\":1500,\"height\":1059,\"caption\":\"elementos en bloque y l\u00ednea\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.espai.es\/blog\/2017\/12\/elementos-en-bloque-y-linea\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.espai.es\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Elementos en bloque y l\u00ednea en html (Gu\u00eda definitiva)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.espai.es\/blog\/#website\",\"url\":\"https:\/\/www.espai.es\/blog\/\",\"name\":\"Blog Escola Espai\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.espai.es\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/2147604b486e1347f6e764b0d3964725\",\"name\":\"Paco Luque\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/1f139c1b28c03e6963f4e701f000714729510b27ec31d7ff3fd8019fde1330fd?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/1f139c1b28c03e6963f4e701f000714729510b27ec31d7ff3fd8019fde1330fd?s=96&d=mm&r=g\",\"caption\":\"Paco Luque\"},\"url\":\"https:\/\/www.espai.es\/blog\/author\/paco\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Elementos en bloque y l\u00ednea en html (Gu\u00eda definitiva) - Blog Escola Espai","description":"Hoy quiero hablaros de un problema que me encuentro con mucha regularidad en las clases de maquetaci\u00f3n en html y css: los elementos en bloque y l\u00ednea.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.espai.es\/blog\/2017\/12\/elementos-en-bloque-y-linea\/","og_locale":"es_ES","og_type":"article","og_title":"Elementos en bloque y l\u00ednea en html (Gu\u00eda definitiva) - Blog Escola Espai","og_description":"Hoy quiero hablaros de un problema que me encuentro con mucha regularidad en las clases de maquetaci\u00f3n en html y css: los elementos en bloque y l\u00ednea.","og_url":"https:\/\/www.espai.es\/blog\/2017\/12\/elementos-en-bloque-y-linea\/","og_site_name":"Blog Escola Espai","article_published_time":"2017-12-21T12:52:30+00:00","article_modified_time":"2017-12-22T10:32:59+00:00","og_image":[{"width":1500,"height":1059,"url":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2017\/12\/block-size.jpg","type":"image\/jpeg"}],"author":"Paco Luque","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Paco Luque","Tiempo de lectura":"6 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.espai.es\/blog\/2017\/12\/elementos-en-bloque-y-linea\/#article","isPartOf":{"@id":"https:\/\/www.espai.es\/blog\/2017\/12\/elementos-en-bloque-y-linea\/"},"author":{"name":"Paco Luque","@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/2147604b486e1347f6e764b0d3964725"},"headline":"Elementos en bloque y l\u00ednea en html (Gu\u00eda definitiva)","datePublished":"2017-12-21T12:52:30+00:00","dateModified":"2017-12-22T10:32:59+00:00","mainEntityOfPage":{"@id":"https:\/\/www.espai.es\/blog\/2017\/12\/elementos-en-bloque-y-linea\/"},"wordCount":1135,"commentCount":2,"image":{"@id":"https:\/\/www.espai.es\/blog\/2017\/12\/elementos-en-bloque-y-linea\/#primaryimage"},"thumbnailUrl":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2017\/12\/block-size.jpg","keywords":["CSS","CSS3","dise\u00f1o","dise\u00f1o web","HTML5","web"],"articleSection":["Dise\u00f1o Web"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.espai.es\/blog\/2017\/12\/elementos-en-bloque-y-linea\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.espai.es\/blog\/2017\/12\/elementos-en-bloque-y-linea\/","url":"https:\/\/www.espai.es\/blog\/2017\/12\/elementos-en-bloque-y-linea\/","name":"Elementos en bloque y l\u00ednea en html (Gu\u00eda definitiva) - Blog Escola Espai","isPartOf":{"@id":"https:\/\/www.espai.es\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.espai.es\/blog\/2017\/12\/elementos-en-bloque-y-linea\/#primaryimage"},"image":{"@id":"https:\/\/www.espai.es\/blog\/2017\/12\/elementos-en-bloque-y-linea\/#primaryimage"},"thumbnailUrl":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2017\/12\/block-size.jpg","datePublished":"2017-12-21T12:52:30+00:00","dateModified":"2017-12-22T10:32:59+00:00","author":{"@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/2147604b486e1347f6e764b0d3964725"},"description":"Hoy quiero hablaros de un problema que me encuentro con mucha regularidad en las clases de maquetaci\u00f3n en html y css: los elementos en bloque y l\u00ednea.","breadcrumb":{"@id":"https:\/\/www.espai.es\/blog\/2017\/12\/elementos-en-bloque-y-linea\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.espai.es\/blog\/2017\/12\/elementos-en-bloque-y-linea\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.espai.es\/blog\/2017\/12\/elementos-en-bloque-y-linea\/#primaryimage","url":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2017\/12\/block-size.jpg","contentUrl":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2017\/12\/block-size.jpg","width":1500,"height":1059,"caption":"elementos en bloque y l\u00ednea"},{"@type":"BreadcrumbList","@id":"https:\/\/www.espai.es\/blog\/2017\/12\/elementos-en-bloque-y-linea\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.espai.es\/blog\/"},{"@type":"ListItem","position":2,"name":"Elementos en bloque y l\u00ednea en html (Gu\u00eda definitiva)"}]},{"@type":"WebSite","@id":"https:\/\/www.espai.es\/blog\/#website","url":"https:\/\/www.espai.es\/blog\/","name":"Blog Escola Espai","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.espai.es\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/2147604b486e1347f6e764b0d3964725","name":"Paco Luque","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/1f139c1b28c03e6963f4e701f000714729510b27ec31d7ff3fd8019fde1330fd?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/1f139c1b28c03e6963f4e701f000714729510b27ec31d7ff3fd8019fde1330fd?s=96&d=mm&r=g","caption":"Paco Luque"},"url":"https:\/\/www.espai.es\/blog\/author\/paco\/"}]}},"jetpack_featured_media_url":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2017\/12\/block-size.jpg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts\/7016","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/users\/26"}],"replies":[{"embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/comments?post=7016"}],"version-history":[{"count":13,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts\/7016\/revisions"}],"predecessor-version":[{"id":7072,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts\/7016\/revisions\/7072"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/media\/7022"}],"wp:attachment":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/media?parent=7016"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/categories?post=7016"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/tags?post=7016"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}