CSS Display <p> default block

Hidden elements-Display:none or Visibility:hidden

You can hide an element by setting the display property to "None" or by setting the visibility property to "hidden". However, note that these two methods produce different results.

Visibility:hidden can hide an element, but the hidden element still needs to occupy the same space as it did before it was hidden. That is, although the element is hidden, it still affects the layout.

CSS Display-block and inline elements

A block element is an element that occupies the full width and is a newline character before and after.

Examples of block elements:

• <p>
• <div>

Inline elements require only the necessary width and do not force line breaks.

Examples of inline elements:

• <span>
• <a>

Word wrapping is because display is block, and inline will not be automatically wrapped, if the line is still wrapped , plus the Float property will automatically be placed in a row according to the location

<p style= "Display:inline;" > Line Break </p>
<p style= "Display:inline;" > Line Break </p>

Line break

Line break

The block element has the width and height properties, the inline element does not, and if you want to have the width and Height properties, apply Inline-block

Value    Description None    This element is not displayed. Block    This element will be displayed as a block-level element with a newline character before and after this element. Inline    Default. This element is displayed as an inline element with no line break before or after the element. Inline-block the    inline block element. (CSS2.1 new value) List-item    This element is displayed as a list. Run-in    This element is displayed as a block-level element or inline element based on the context. The compact    CSS has the value compact, but has been removed from CSS2.1 due to a lack of broad support. Marker    CSS has a value of marker, but it has been removed from CSS2.1 due to a lack of extensive support. Table    This element is displayed as a block-level table (similar to <table>) with a newline character before and after the table. Inline-table    This element is displayed as an inline table (similar to <table>) and there are no line breaks before or after the table. Table-row-group    This element is displayed as a grouping of one or more rows (similar to <tbody>). Table-header-group    This element is displayed as a grouping of one or more rows (similar to <thead>). Table-footer-group    This element is displayed as a grouping of one or more rows (similar to <tfoot>). Table-row    This element is displayed as a table row (similar to <tr>). Table-column-group    This element is displayed as a grouping of one or more columns (similar to <colgroup>). Table-column    This element is displayed as a cell column (similar to <col>) Table-cell    This element is displayed as a table cell (similar to <td> and <th> Table-caption    This element is displayed as a table header (similar to <caption>) inherit    specifies that the value of the display property should be inherited from the parent element.

Display property Value

CSS Display <p> default block