display: inline inline elements are elements with display: inline , such as <a> , <input> , <span> , <img> and others text is inline element inline elements go on the same line one by one jumps to the next line if there is no space anymore width / height fits the content & can not be set top & bottom margins can not be set left & right margins can be set padding can be set line break in html between inline elements is considered as a space display: block Block tends to expand to the whole width Block elements go one under another (if there is no "float" property) block with width: max-content does not take whole width height / width can be set block elements stick to each other w/o gaps (if there is no margin) most of elements are block els by default block element is a rectangle display: inline-block it is a block element with few exceptions elements go on the same line one by one width & height fits the content width & height can be set Usually used to show block elements in one line line break in html (between tags for ex) considered as a space display: table Can make a table from any element with following properties display: table display: table-row display: table-header-group display: table-row-group display: table-footer-group display: table-column display: table-column-group display: table-cell display: table-caption display: flex Flex container expands or shrinks items to fill available free. Flex layout is direction-agnostic Check my playground for flex properties display: list-item Makes like a <li> bullet point list element. display: run-in Element becomes the first inline element of next block element float: left float: left | right | none | inherit With float property element is extracted from the normal css flow It is moved to left/right until touches the parent's edge or another floating element Float makes element automatically display: block If there is no space to fit the element on a line, then it goes to the next line Other non-positioned block elements w/o float acts like floating element does not exist Inline elements know about floating element and go around it There is no vertical margin collapsing between floating and neighboring elements Float block can be a container and include other elements Widely used in text with images Parent does not reserve space for floating element, to fix it may add element after with clear: left | right | both display: contents Allows you to treat children of flex or grid item just like they are flex/grid items themselves. In other words you can "flatten out" nested DOM tree to use it within one flex or grid system.