A brief discussion of the difference between block elements and inline elements

Tag elements in HTML are generally divided into three different types: block elements, inline elements (also called inline elements) and inline block elements. So what is the difference between block elements and inline elements? Let me introduce it to you below.

##Inline elements

In html, , , Tags such as and

are typical inline elements. Of course, block elements can also be displayed as inline elements by setting

display:inline;, so that block-level elements have the characteristics of inline elements.

p{
  display:inline;
}
...<p>我要变成内联元素！</p>

Characteristics of inline elements:

1. On the

same line as other elements, not on an exclusive line;

2. The height, width and top and bottom margins of elements

cannot be set;

(ps: the top and bottom margins of inline elements, margin-top and margin-bottom attributes do not work , and the margin-left and margin-right attributes can work. The padding attributes top, bottom, left, and right can also work,

but the padding-top attribute can only reach the top of the browser at most , padding- top is higher than the top of the browser, and the element will not move down. When adding a background to an inline element, you can use padding, but the background color will cover the surrounding elements.)

3. The width of the element is the image contained in the element. Or the width of the text, which cannot be set;

*: Gaps will appear when there are "carriage returns", "tabs", and "spaces" between inline elements.

Solution: Write it on one line, without spaces, carriage returns or other symbols in the middle.

Block elements

In html

,

,

,

,

and
• are block elements. Inline elements can be displayed as block elements by setting

  display:block;.

  For example: a{display:block;}

  Characteristics of block-level elements:

  1. Each block element starts on a new line Start, and the following elements will also start on a new line (

  Occupy one line);

  2. The height, width, line height, top and bottom margins of the element can be set;
  3. If the element width is not set, it will account for 100% of its parent container (the same as the width of the parent element);

  Inline block elements

  Inline block elements (inline-block) are

  having the characteristics of both inline elements and block elements, code display:inline- block is to set the element as an inline block element. The and tags are such inline block tags.

  Characteristics of inline block elements:

  1. They are on the same line as other elements;
  2. The height, width, and line of the element Height and top and bottom margins can be set.
  Recommended learning:

  HTML video tutorial
  

  The above is the detailed content of A brief discussion of the difference between block elements and inline elements. For more information, please follow other related articles on the PHP Chinese website!