{"id":19253,"date":"2024-03-12T13:00:00","date_gmt":"2024-03-12T12:00:00","guid":{"rendered":"https:\/\/carontestudio.com\/blog\/?p=19253"},"modified":"2024-03-13T17:25:27","modified_gmt":"2024-03-13T16:25:27","slug":"diferencias-entre-display-block-inline-inline-block","status":"publish","type":"post","link":"https:\/\/carontestudio.com\/blog\/diferencias-entre-display-block-inline-inline-block\/","title":{"rendered":"Diferencias entre display block, inline & inline-block"},"content":{"rendered":"\n

El CSS<\/strong> es uno de los pilares del dise\u00f1o web<\/a>, ya que va a ser el responsable de vestir la estructura generada por nuestro HTML<\/a>, va a ser la parte visual <\/strong>de nuestras p\u00e1ginas webs. Para utilizar CSS<\/a> de manera eficaz, es esencial comprender la propiedad display<\/em> \u2728.<\/p>\n\n\n\n

La propiedad display <\/em>determina como varios elementos se mostrar\u00e1n en una p\u00e1gina. Y dentro de esta propiedad tenemos varios valores, que a veces llegan a causar cierta confusi\u00f3n, sobre todo en gente que acaba de entrar en el mundo del front-end: block, inline, inline-block.<\/strong><\/p>\n\n\n\n

En esta entrada vamos a ver las diferencias entre display block<\/em>, inline <\/em>e inline-block<\/em><\/p>\n\n\n\n

Display block<\/h2>\n\n\n\n

Un elemento con display block<\/strong>, empezar\u00e1 siempre en una nueva l\u00ednea y por defecto va a ocupar el ancho completo<\/strong> (el 100%) de su padre. Si escribimos varios elementos tipo block <\/strong> se ir\u00e1n apilando uno encima de otro.<\/p>\n\n\n\n

Los elementos de tipo bloques son vers\u00e1tiles en cuanto a que aceptan paddings <\/em>y margins<\/em><\/strong> <\/em>con lo cual tenemos control sobre el espacio que ocupan.<\/p>\n\n\n\n

Algunos elementos que traen son de tipo block <\/em>por defecto: div, p, h1-h6, nav, ul, figure<\/em>.<\/p>\n\n\n\n

Display inline<\/h2>\n\n\n\n

Por otro lado, un elemento inline<\/strong> es literalmente una l\u00ednea. No va a pasar a la l\u00ednea siguiente, empezar\u00e1 justo despu\u00e9s del elemento anterior y el contenido que ocupa a lo ancho viene dado por su propio contenido, no puedes aplicar ancho o alto (width <\/em>\/ height<\/em>)<\/strong> y ni los margins <\/em>ni los paddings <\/em>se comportar\u00e1n como esperamos, se podr\u00e1 aplicar, pero siempre ser\u00e1 mejor pr\u00e1ctica darlos en los elementos inline-block<\/strong> que veremos a continuaci\u00f3n.<\/p>\n\n\n\n

Algunos elementos que traen son de tipo inline <\/em>por defecto: span, a, img, input, strong, br<\/em>.<\/p>\n\n\n\n

Inline-block: Lo mejor de ambos mundos<\/strong><\/h2>\n\n\n\n

Pero \u00bfqu\u00e9 pasa si queremos tener un elemento inline,<\/strong> al que nos gustar\u00eda darle paddings<\/em> y margins <\/em>y adem\u00e1s definir su ancho y largo<\/strong>?\ud83e\ude84 Aqu\u00ed es donde entra inline-block.<\/strong> Combina aspectos tanto de inline <\/em>como de block <\/em>como el propio nombre indica.<\/p>\n\n\n\n

Inline-block<\/em> puede ser especialmente \u00fatil para ubicar elementos button <\/em>en la misma l\u00ednea. O para a\u00f1adirle un pseudo elemento a un elemento tipo p\u00e1rrafo o encabezado.<\/p>\n\n\n\n

Si todav\u00eda no te ha quedado claro, te dejamos este peque\u00f1o ejemplo para que trastees:<\/p>\n\n\n\n

\n See the Pen \n Untitled<\/a> by David Boo (@David-Boo<\/a>)\n on CodePen<\/a>.<\/span>\n<\/p>\n