About block-level elements and inline elements

Block-level elements

Block-level elements have several characteristics:

1. If the width is not set, the element automatically adapts to the width of the parent element
2. can have margin and inner margin
3. If the height is not set, the element automatically adapts to the height of the child elements (assuming they are not set to float and position)
4. By default, it will be placed after the previous element in the HTML tag (assuming no floating or positioning)
5. Ignore vertical-align Property

So, for block-level elements, there is no need to set width:100% to keep its width full of the parent element, and that, in doing so, may cause trouble in future maintenance.

Moreover, for the 4th above, we do not need to set the block-level element "clear", assuming that there is no float to affect, block-level elements will automatically appear in the City line.

Block-level elements:

<p>, <div>, <form>, , <nav>, <ul>, <li>,

In-line elements

The inline element has several characteristics:

1. Does not occupy a single line like a block-level element
2. Support for White-space Properties
3. Ignores upper and lower margins, but has left and right margins and all padding
4. Ignore width and height properties
5. If you set a float, it becomes a block-level element that will have all the attributes of the block-level element
6. Support for vertical-align Properties

The inline element behaves like a text box. They will appear next to each other.

Inline element Tags:

<a>, <span>, <b>, <em>, <i>, <cite>, <mark>, <code>.

We can note that it is still easier to differentiate between inline and block-level elements, and block-level elements can usually contain other elements, while inline elements are generally text-based.

In general, you can have block-level elements contained in another block-level element. You can also have inline elements contained in block-level elements or inline elements. But you can't have a block-level element contained within the inline element. But there is one exception: You can <a> include block-level or inline elements in the tag.

We can use the display property to swap block-level elements with inline elements.

About block-level elements and inline elements