First, we define the differences between inline elements and block-level elements: 1. Inline elements can only wrap data and inline elements, while block-level elements can wrap block-level elements and inline elements. 2. Instead of inline elements starting with a new line, block-level elements start with a new line. 3. The width and height cannot be set for inline elements, but for block-level elements. Query an MDN document with these elements: A br IMG span button input select Textarea div DL DD header article Selection Footer form OL ul P table Why is BR an inline element? Because br does not own a row, it shares a row with its previous sibling, and BR cannot set width and height. The console looks at the display property and finds that the value is inline. Why is HR a block-level element? Because: HR monopolizes a row, HR can set the width and height. The display value is block. My heart and always have a question, why the img, button, input, select, textarea as inline elements can set wide high? The img and input elements of type “image” are inline and inline-block, respectively. The img and input elements of type “image” are inline and inline-block, respectively. The display of other elements is inline-block. So the conclusion is that img, button, input, select, textarea as inline elements can set wide high in part because img is replaceable element, the other part of the reason is that the input, the button, select, The display property of the textarea is inline-block, so the width and height can be set. The description of replaceable elements can be found in MDN, which feels a bit abstract. Simply put, the presentation effect of replaceable elements is not controlled by CSS. CSS can only control the size of elements and the position or positioning of content objects within the box area of the element. Object-fit replaces how the content in an element fits into the width and height of the element fill: Stretch the content to completely fill the element. Contain: Contain elements with a width to height ratio. Cover: Keep the width and height ratio of filling, filling no longer for cutting. Object-postion sets the location of content within the element linked here. Developer.mozilla.org/zh-CN/docs/…