Overview and differences between html inline elements and html block-level elements

Overview and differences between html inline elements and html block-level elements
Block-level element features :
•Always occupies a line by itself, starting from a new line, and the elements that follow must also be displayed on a new line;
•Width, height, padding and margin can all be controlled;

Inline element properties :
• On the same line as adjacent inline elements;
• The width (width), height (height), top/bottom of the inner margin (padding-top/padding-bottom) and top/bottom of the outer margin (margin-top/margin-bottom) cannot be changed, that is, the size of the text or picture inside;

The main block-level elements are :

Copy code
The code is as follows:

address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul

The main inline elements are :

Copy code
The code is as follows:

a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,
textarea , tt , u , var

Variable elements (determine whether the element is a block element or an inline element based on the context) :

Copy code
The code is as follows:

applet ,button ,del ,iframe , ins ,map ,object , script

Application of block-level and inline elements in CSS :
By using CSS, we can get rid of the restrictions of HTML tag classification in the table above and freely apply the attributes we need to different tags/elements.

The main CSS styles used are the following three :
•display:block -- Display as a block-level element
•display:inline -- Display as an inline element
• dipslay:inline-block -- Displayed as an inline block element, it is displayed in the same row and can modify properties such as width, height, inner and outer margins. We often add the display:inline-block style to the <ul> element, so that the originally vertical list can be displayed horizontally.

Off topic : I recently sorted out some knowledge about the difference between block-level elements and inline elements. I found a lot of related articles on the Internet and found that everyone's understanding seemed to be wrong. I tested it myself and found a lot of problems :
1. The margin-left / margin-right and padding-left / padding-right of inline elements can be controlled, so the width of inline elements can be controlled by these four properties.
2. Block-level element tags can also be placed inside inline elements, and the internal block-level element tags will expand the external inline tags, so the height of inline elements can be controlled by placing block elements (it is introduced on the Internet that inline elements can only hold text and other inline elements)
For example:

Copy code
The code is as follows:

<a>
<div style="width:100px;height:100px;">Test</div>
</a>

<<:  Detailed explanation of the benefits of PNG in various network image formats

>>:  Methods and steps to use http-proxy-middleware to implement proxy cross-domain in Node

Recommend

React Hooks Usage Examples

Table of contents A simple component example More...

MySQL Database Iron Laws (Summary)

Good database specifications help reduce the comp...

Detailed usage of kubernetes object Volume

Overview Volume is the abstraction and virtualiza...

Solve the problem of the container showing Exited (0) after docker run

I made a Dockerfile for openresty on centos7 and ...

Automatically install the Linux system based on cobbler

1. Install components yum install epel-rpm-macros...

How to obtain and use time in Linux system

There are two types of Linux system time. (1) Cal...

Defining the minimum height of the inline element span

The span tag is often used when making HTML web p...

Ways to improve MongoDB performance

MongoDB is a high-performance database, but in th...

Zen Coding Easy and fast HTML writing

Zen Coding It is a text editor plugin. In a text ...

Overview of the Differences between Linux TTY/PTS

When we type a letter on the keyboard, how is it ...

How to deploy DoNetCore to Alibaba Cloud with Nginx

Basic environment configuration Please purchase t...

Deep understanding of line-height and vertical-align

Several concepts Line box: A box that wraps an in...

Explaining immutable values ​​in React

Table of contents What are immutable values? Why ...