{"id":2278,"date":"2021-11-26T09:53:06","date_gmt":"2021-11-26T09:53:06","guid":{"rendered":"https:\/\/blog.embold.io\/?p=2278"},"modified":"2021-11-26T10:20:20","modified_gmt":"2021-11-26T10:20:20","slug":"difference-between-inline-inline-block-and-block-layout-elements","status":"publish","type":"post","link":"https:\/\/blog.embold.io\/es\/difference-between-inline-inline-block-and-block-layout-elements\/","title":{"rendered":"Difference between inline, inline-block, and block layout elements"},"content":{"rendered":"\n

The inline, inline-block, and block layout values are all possible values for the CSS display properties. Many newbie frontend developers usually struggle with understanding the difference between the three, and it\u2019s a common frontend developer interview question. <\/p>\n\n\n\n

display:inline<\/h1>\n\n\n\n

When an element is styled with display:inline<\/code>, it will not start on a new line, will only take up as much width as the content it contains, and will not cause a line break after it. <\/p>\n\n\n\n

For example, consider the code below: <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

As you can see, the inline element is not affected by the declared width or height.
The HTML<span><\/code> element is inline by default as well as several other elements listed here<\/a>. <\/p>\n\n\n\n

display:inline-block<\/h1>\n\n\n\n

The difference between an inline element and an inline-block element is that an inline-block element can take up specified width and height. But, it will also not start on a new line within its parent or cause a line break after it. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

As you can see, the inline-block element does not start on a new line, but it takes up the specified width and height. <\/p>\n\n\n\n

display:block<\/h1>\n\n\n\n

Any element styled with display: block<\/code> is the polar opposite of display:inline<\/code>. A block element starts on a new line and occupies the available width of its parent element or its specified width. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

As you can see, the block element starts on a new line.<\/p>\n\n\n\n

The HTML [p], [div<\/code>], as well as other elements listed\u00a0here<\/a>\u00a0are block elements by default.\u00a0<\/p>\n\n\n

Blog Credits: Linda Ikechukwu<\/span><\/p>\n

\u201d Linda Ikechukwu is a Frontend Developer turned Technical Content Consultant. She enjoys strategizing on and creating content that helps tech startups connect with their target audience. \u201c
\"\"<\/div>","protected":false},"excerpt":{"rendered":"

The inline, inline-block, and block layout values are all possible values for the CSS display properties. Many newbie frontend developers usually struggle with understanding the difference between the three, and…<\/p>\n","protected":false},"author":10,"featured_media":2280,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[5],"tags":[248,153,249,235,246,247],"better_featured_image":{"id":2280,"alt_text":"","caption":"","description":"","media_type":"image","media_details":{"width":1280,"height":853,"file":"2021\/11\/Difference-between-inline-inline-block-and-block-layout-elements.jpg","sizes":{"thumbnail":{"file":"Difference-between-inline-inline-block-and-block-layout-elements-150x150.jpg","width":150,"height":150,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/11\/Difference-between-inline-inline-block-and-block-layout-elements-150x150.jpg"},"medium_large":{"file":"Difference-between-inline-inline-block-and-block-layout-elements-768x512.jpg","width":768,"height":512,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/11\/Difference-between-inline-inline-block-and-block-layout-elements-768x512.jpg"},"penci-full-thumb":{"file":"Difference-between-inline-inline-block-and-block-layout-elements-1170x780.jpg","width":1170,"height":780,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/11\/Difference-between-inline-inline-block-and-block-layout-elements-1170x780.jpg"},"penci-slider-thumb":{"file":"Difference-between-inline-inline-block-and-block-layout-elements-1170x663.jpg","width":1170,"height":663,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/11\/Difference-between-inline-inline-block-and-block-layout-elements-1170x663.jpg"},"penci-magazine-slider":{"file":"Difference-between-inline-inline-block-and-block-layout-elements-780x516.jpg","width":780,"height":516,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/11\/Difference-between-inline-inline-block-and-block-layout-elements-780x516.jpg"},"penci-slider-full-thumb":{"file":"Difference-between-inline-inline-block-and-block-layout-elements-1280x800.jpg","width":1280,"height":800,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/11\/Difference-between-inline-inline-block-and-block-layout-elements-1280x800.jpg"},"penci-thumb":{"file":"Difference-between-inline-inline-block-and-block-layout-elements-585x390.jpg","width":585,"height":390,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/11\/Difference-between-inline-inline-block-and-block-layout-elements-585x390.jpg"},"penci-masonry-thumb":{"file":"Difference-between-inline-inline-block-and-block-layout-elements-585x390.jpg","width":585,"height":390,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/11\/Difference-between-inline-inline-block-and-block-layout-elements-585x390.jpg"},"penci-thumb-square":{"file":"Difference-between-inline-inline-block-and-block-layout-elements-585x585.jpg","width":585,"height":585,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/11\/Difference-between-inline-inline-block-and-block-layout-elements-585x585.jpg"},"penci-thumb-vertical":{"file":"Difference-between-inline-inline-block-and-block-layout-elements-480x650.jpg","width":480,"height":650,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/11\/Difference-between-inline-inline-block-and-block-layout-elements-480x650.jpg"},"penci-thumb-small":{"file":"Difference-between-inline-inline-block-and-block-layout-elements-263x175.jpg","width":263,"height":175,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/11\/Difference-between-inline-inline-block-and-block-layout-elements-263x175.jpg"},"jr_insta_square":{"file":"Difference-between-inline-inline-block-and-block-layout-elements-640x640.jpg","width":640,"height":640,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/11\/Difference-between-inline-inline-block-and-block-layout-elements-640x640.jpg"}},"image_meta":{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0","keywords":[]}},"post":2278,"source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/11\/Difference-between-inline-inline-block-and-block-layout-elements.jpg"},"translation":{"provider":"WPGlobus","version":"2.10.8","language":"es","enabled_languages":["en","es","de","fr","ru"],"languages":{"en":{"title":true,"content":true,"excerpt":false},"es":{"title":false,"content":false,"excerpt":false},"de":{"title":false,"content":false,"excerpt":false},"fr":{"title":false,"content":false,"excerpt":false},"ru":{"title":false,"content":false,"excerpt":false}}},"_links":{"self":[{"href":"https:\/\/blog.embold.io\/es\/wp-json\/wp\/v2\/posts\/2278"}],"collection":[{"href":"https:\/\/blog.embold.io\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.embold.io\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.embold.io\/es\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.embold.io\/es\/wp-json\/wp\/v2\/comments?post=2278"}],"version-history":[{"count":5,"href":"https:\/\/blog.embold.io\/es\/wp-json\/wp\/v2\/posts\/2278\/revisions"}],"predecessor-version":[{"id":2289,"href":"https:\/\/blog.embold.io\/es\/wp-json\/wp\/v2\/posts\/2278\/revisions\/2289"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.embold.io\/es\/wp-json\/wp\/v2\/media\/2280"}],"wp:attachment":[{"href":"https:\/\/blog.embold.io\/es\/wp-json\/wp\/v2\/media?parent=2278"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.embold.io\/es\/wp-json\/wp\/v2\/categories?post=2278"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.embold.io\/es\/wp-json\/wp\/v2\/tags?post=2278"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}