This is the 22nd day of my participation in the August Wen Challenge.More challenges in August

Elements are the basis of a document’s structure, and in CSS, each element generates a box of content, known as a box. But different elements are displayed differently, either across a row or horizontally next to each other. For example, div and SPAN are displayed differently because div is a block-level element and occupies a row, while SPAN is an inline element and can be placed on multiple spans.

Let’s take a closer look at the differences between block-level elements, inline elements, and inline block-level elements in CSS.

1. Block level element block

Block-level elements, as the name implies, are “block-like”, so they have their own width and height, that is, customizable width and height. In addition, block-level elements are domineering, occupying a single row height (except for float floats), and can generally be used as other containers for both block-level and inline elements.

Block-level elements have the following characteristics:

  • Each block-level element is on its own row;
  • Height, line height, margin, and padding can be controlled;
  • The width of the element, if not set, defaults to the width of the parent element (parent element width 100%;
  • Multiple block element labels are written together, and the default arrangement is top to bottom.
 <address>// Define the address<caption>// Define the table title<dd>// Define items in the define list<div>// Define a partition or section in a document<dl>// Define a list<dt>// Define the items in the list<fieldset>// Define a frameset<form>// Create an HTML form<h1>// Define the largest title<h2>// Define the subtitle<h3>// Define the title<h4>// Define the title<h5>// Define the title<h6>// Define the smallest title<hr>// Create a horizontal line<legend>// The element defines the title for the FieldSet element<li>// The tag defines list items<noframes>Display text inside the frameset element for browsers that do not support frames<noscript>// Define what to replace when the script is not executed<ol>// Define an ordered list<ul>// Define an unordered list<p>// Tag defines paragraph<pre>// Define preformatted text<table>// The tag defines the HTML table<tbody>// Label table body (body)<td>// Standard cells in the table<tfoot>// Define the footer of the table (footnote or table note)<th>// Define the table header cell<thead>// The tag defines the header of the table<tr>// Define the rows in the tableCopy the code

2. Inline elements are inline

Inline elements cannot be set to width or height, but can be placed on the same line as other inline elements. Inline elements generally cannot contain block-level elements. The height of inline elements is generally determined by the font size inside the element, and the width is controlled by the length of the content. Inline elements have the following characteristics:

  • It does not monopolize a row. The elements in adjacent rows are arranged in the same row until there is no more space in the row. The width varies with the content of the element.
  • Height and width are invalid. For margin and padding, only left and right directions are valid.
  • Setting the row height is effective, which is the same as setting the row height of the parent element.
  • The width of an element is the width of the text or image it contains and cannot be changed;
  • You can’t put block-level elements in inline elements, and you can’t put links in a-links.
 <a>// Tags can define anchors<abbr>// indicates an abbreviated form<acronym>// Define an acronym only<b>// Make the font bold<bdo>// Overrides the default text orientation<big>// Large font in bold<br>/ / a newline<cite>// define by reference<code>// Define the computer code text<dfn>// Define a definition item<em>// Is defined as something to emphasize<i>// Italic text effect<kbd>// Define keyboard text<label>// Tags define annotations for input elements (tags)<q>// Define short references<samp>// Define sample text<select>// Create a single or multiple menu<small>// Render a small font<span>// Combine inline elements in a document<strong>/ / bold<sub>// Define the subscript text<sup>// Define superscript text<textarea>// Multi-line text input control<tt>// Typewriter or equal-width text effects<var>// Define variablesCopy the code

3. Inline block-level elements inline-block

An inline block-level element, which has the characteristics of both block-level and inline elements, is free to set the width and height of the element, and can place multiple inline block-level elements in a row. For example, input and img are inline block-level elements, which can be set to height, width and multiple lines. The specific characteristics are as follows:

  • Height, line height, margins and margins can be controlled;
  • The default width is the width of its own content. It does not occupy a single line, but there will be gaps between the lines.
<button> 
<input>   
<textarea> 
<select> 
<img>
Copy the code

4. Element type conversion display

Display: block defines the element as a block-level element

Display: inline, defines the element as an inline element

Display: inline-block defines the element as an in-line block-level element

5. To summarize

The differences between block-level elements and inline elements are the arrangement, width and height of the margins, and the default width.

  • Block-level elements occupy a single line, while inline elements and inline block elements are displayed on a single line.
  • Width and height can be set for block-level elements and inline block elements, but the inline element setting is invalid.
  • Block-level elements default to 100% width, while inline elements have widths based on their own content or child elements.

In-line block-level elements have the characteristics of both block-level elements and in-line elements.