[Interview Pitfalls] Can the width and height of inline elements be set_html/css_WEB-ITnose

I was not busy today. I browsed the blog and saw an article about "Can the width and height of inline elements be set?". My first reaction at the time was of course not (float, display:block does not count~), this is how I answer this question when asked in interviews.

Before I saw the blogger’s explanation, I already knew I was wrong just by looking at the examples he gave... For example, elements such as "img, input", When I usually use them, I really set the width and height directly for them, without doing any blocks, etc., but they are divided into inline elements in my consciousness.

I patiently finished reading the blog, feeling a little ashamed...

A pair of new concepts are proposed here ( For me):

Replaceable and non-replaceable elements.

Replacing elements: Replacing elements means that the browser determines the specific display content of the element based on its tags and attributes.

(For example, the browser will read the image information and display it based on the value of the src attribute of the tag, but if you view the (X)HTML code, you cannot see the actual content of the image; and For example, the type attribute of the tag determines whether to display an input box, a radio button, etc.)

Non-replaceable elements: Most elements of HTML are non-replaceable elements. That is, its content is directly displayed to the user (such as a browser).

A simple summary is:

Replacement elements generally have intrinsic dimensions, so they have width and height, which can be set. For example, if you do not specify the width and height of the img, it will be displayed according to its intrinsic size, which is the width and height of the image when it is saved. For form elements, browsers also have default styles, including width and height.

So, if you encounter such a question in the future, you cannot directly answer "yes" or "no". The correct answer should be Replacement elements are OK, but non-replacement elements are not. Yes .

Write it again to remind yourself.