What is body style display none

CSS display • Type of presentation

Each HTML element is a box

The browser creates a box for each HTML element. CSS display defines the type of box and assigns it a behavior. The behavior of display: block is: "New line", the behavior of a table cell (display: table-cell): "Text can be centered vertically".

Boxes appear even within lines of text when words in an HTML tag like em or a lie. If an HTML element like span or em a display: block assigned, a line break occurs before and after the element.

display none

display: none completely suppresses the display of an element and the element does not take up any space in the layout of the page (the HTML attribute hidden also causes a similar behavior).

.shownone {display: none; }

CSS display is always a switch: the values ​​are not numeric, so display not through CSS transition can be animated.

display: block | display: inline

display: block turns an inline element (element that does not break a line) into a block element that breaks a line. Conversely, the property transforms display: inline a block element into an inline element.

ul.naviste li {display: inline; width: 120px; border: 1px solid silver; float: left; }

display: inline block

Elements with inline block can be used as inline elements (e.g. with line-height and vertical-align) can be styled. padding and margin regulate the distance to the comprehensive block and at the end elements with inline-block also accept width and height like a block element.

inline block e.g. converts a label tag in forms into a block element with a line break. In this way, a form can be built up in columns without complex tables.




display: inline block is also an alternative to float. With inline-block, the comprehensive block grows with it and the clearfix hack can be left out. But like all positioning techniques, display: inline-block also has its rough edges: Positioning with float or display: inline-block?

display: table-row / table-cell

Tables are out and taboo? HTML tables as a layout framework have given way to the ubiquitous float. Tables and table cells had some useful properties that can be reappeared with the help of display: table, table-row and table-cell:

  • Tables only take up the space that they need for their content - and can be easily centered horizontally.
  • table-row and table-cell simulate the row of a table and place, for example, three blocks at the same height on large monitors.
  • display: table-cell masters the little trick of centering an element vertically (vertical-align: middle) or placing it at the bottom of the comprehensive block (vertical-align: bottom).
Lorem ipsum dolor sit amet
Vivamus ullamcorper cursus nibh, at mollis enim. Proin pellentesque aliquam dapibus. Cras aliquet, quam molestie venenatis egestas, tortor sapien vulputate metus
Donec arcu odio, vehicula ac rutrum ut

CSS tables with display: table, table-row and table-cell are a chapter of their own ...

display: flex

The Flexbox is an alternative model for positioning (CSS Flexible Box Layout Module Level 1 / April 2018) in addition to the well-known block model with position: absolute / relative and float: left / right.

The classic block model for positioning aligns elements either horizontally (display: inline) or vertically (display: block). Equivalent to this, the flex container also aligns the elements it contains either horizontally (display: flex; flex-direction: row) or vertical (display: flex; flex-direction: column) out. The flex container determines as the behavior of its children.

Other properties of the flex container allow the flex boxes to wrap, align flex boxes left, right, centered, on the upper edge or on the lower edge. The free space between the boxes can be evenly distributed.

The Flex model has seen some changes in recent years, both in terms of specification and in terms of implementation in the various browsers. So it happens that a large part of the reports and articles on the flex model are out of date and a lot confusing.

display: box;
Version from 2009.
display: flexbox;
Version 2011.
display: flex;
Current version.

Old versions of the Flex model are (still) implemented in IE10, IE11 already supports the current version. However, support for the old versions of the Flex model can be omitted at any time.

Small flexbox tutorial

display: grid

While display-flex organizes and generates elements in rows or columns display: grid a two-dimensional layout grid in which elements can span multiple rows and columns. The content can stay in a logical order because each element can be placed in any area.

display: run-in

With the run-in property, a header element would run into the first line of the following text.

An h4 element with display: run-in

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin aliquam mauris tortor, ac posuere orci varius nec. Cras efficitur nisl ac tortor auctor aliquam.

run-in is no longer supported by Firefox and no longer by Chrome, Safari and Opera, but only by IE.

CSS display

Hereditary: No.

display
block | inline | run-in

flow | flow-root | table | flex | grid | ruby | subgrid

list-item | list-item block | list-item flow | list-item flow-root | list-item block flow | list-item block flow-root | flow list-item block

table-row-group | table-header-group | table-footer-group | table-row | table-cell | table-column-group | table-column | table-caption | ruby-base | ruby-text | ruby-base-container | ruby-text-container

content | none

inline block | inline-list-item | inline-table | inline-flex | inline grid

block
represents an element as a block element or box that creates a line break before and after the element.
flex
represents an element as a block element and flex container.
flow-root
could be the end of the clearfix: After a block with display: flow-root, the next block must be at the edge, even if an element with float: left or float-right is in this block.
grid
creates a layout grid in which elements can be placed in any position regardless of the order of the content (only supported by IE10, IE11 and Edge in a limited old syntax).
inline-flex
represents an element as an inline element and flex container.
inline
is the default and displays an element as an inline element. Inline elements do not lead to a line break before and after the element. In other words, the element is displayed on the same line.
inline block
creates a box that "flows" within an inline box.
inline table
displays a table as an inline element or box that does not result in a line break before or after the table.
list-item
displays the element as a list. Each element can be preceded by an optional list item such as a filled circle, which can also be replaced by an image, icon or symbol.
An elegant alternative to :: before
marker
assigns a marker to the content before or after a box element. marker is used together with the dummy elements :nach and : before used (display: marker for CSS tricks)
none
suppresses the display of elements. If display: none holds, the browser has to ignore all positioning instructions (both position and float) and does not generate a box for the element.
run-in
displays the element as a block or inline element, depending on the context.
table
represents an element as a block element.
table-caption
represents an element as a table caption.
table-cell
represents the element as if it were a table cell (td).
table-column
represents the element as if it were a table column (col).
table-column-group
represents the element as if it were a group of table columns (colgroup).
table-footer-group
represents the item as if it were a group of table footers.
table-header-group
represents the element as if it were a group of table headers.
table-row
represents the element as if it were a table row.
table-row-group
represents the element as if it were a group of table rows.