a - display and inline value display → controls how an element is displayed on a webpage. It sets whether the element behaves like a block, inline or other types of elements values → inline, block, inline-block, flex, inline-flex, grid, inline-grid and flow-root inline → the element will take up only as much horizontal space as necessary for its content It does not generate line breaks before or after itself. You cannot set its dimensions, width and height example → display.inline;
b - block and inline-block display values block → it is the default value for block elements (div, p, h1-h6). The element will start on a new line It will also take the full width of its parent and it will create a line break after itself You can also set its dimensions, width and height example → display:block inline-block → it behaves like a block element but it maintains the inline behavior, no line breaks before and after You can also set its dimensions(width, height), margin, border and padding properties example → display: inline-block;
c - flex and grid display values flex → behaves like a block element but lays out its contents according to flexbox model In short it arranges its elements in single row or column It allows more flexibility in their alignment, order ect. example → display: flex; grid → behaves like a block element but lays out its contents according to grid model In short it arranges its elements in a two-dimensional grid It allows more complex arrangment of elements example → diplay: grid; More about flexbox and grid in the future