how does inline block work and how does it differ from inline and block elements when working with CSS you often encounter three different types of display behaviors for elements inline block and inline block each one of these properties affects how elements are positioned and how they interact with other elements on the page in this lecture we will focus on how the inline block property works and how it differs from both inline and Block Level elements Block Level elements behave like large containers or blocks that take up the full width of their parent container they always
start on a new line and their height and width can be adjusted inline elements only take up as much space as they need they flow within the surrounding content and do not break onto a new line the inline block property is a hybrid of these two behaviors like inline elements inline block elements remain in the text flow without starting on a new line however unlike inline elements you can adjust the width and height of an inline block element just as you would with Block Level elements in short the key difference between inline an inline block
is that inline elements cannot have their size controlled whereas inline block elements allow for full control over Dimensions while still staying in line with other content let's take a look at an example here we have a div with a class of container inside that div element we have two span elements here is the accompanying CSS each one of the span elements is set to display inline block and has a width and height set as well here here is the output on the screen the inline block elements will appear side by side because they behave like
inline elements but they also have a specified width and height which gives some block like properties but if you remove the display inline block property neither the height nor the width will be applied even though you define them clearly in this code we removed the display inline block property but kept everything else intact here the span elements revert to the default Behavior as inline elements as a result the specified width and height are ignored and the elements only take up the space needed for their content understanding how inline block works is useful because you can
use it for creating layouts that require both alignment and dimension control within a continuous text flow
