Shulou(Shulou.com)06/02 Report--

This article mainly explains "whether the img of html5 is a block element". The content of the explanation in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "whether the img of html5 is a block element".

The img of html5 is not a block-level element. Img is an inline element as well as a replacement element with built-in width-height attributes, so the img tag can be set to width and height. Img is an inline replacement element. Height, width, padding, and margin are all available, and the effect is equal to the block element.

The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.

Basic use of tags

Browser support

All major browsers support it.

Label

Label definition and instructions for use

Tag defines the image in the HTML page

Tags have two required attributes: src and alt

It is highly recommended that you use the alt attribute in every image in your development. In this way, even if the image cannot be displayed, the user can still see some information about what is missing. And for people with disabilities, the alt attribute is usually the only way for them to understand the content of the image.

What exactly is the element?

Is it an inline element or a block-level element?

The tag doesn't have a single line, so it's an in-line element, which is fine.

Since it is an inline element, why can you set the width and height?

This question is about to extend to the following part.

The tag is a replacement element and has a built-in width and height attribute, so it can be set, as explained below.

Definition of element

In terms of the characteristics of the element itself, it can be divided into irreplaceable elements and replacement elements.

Element-related MDN interpretation

Non-replaceable element

(X) most elements of HTML are irreplaceable elements, that is, their contents are represented directly to the client (such as a browser)

I am the title

Replaceable element

The browser determines the specific display of the element according to the tags and attributes of the element.

For example, browsers will be based on

The src attribute of the tag reads the picture information and displays it, but if you look at the (X) HTML code, you can't see the actual content of the picture. For example, according to the type attribute of the tag, you can decide whether to display the input box, radio button, etc.

(X) in HTML

, and are all replacement elements. These elements often have no actual content, that is, an empty element

Such as:

、

The properties of replaceable elements are the same as those of elements with display:inline-block set

Special replaceable elements

Belong to replaceable element

It also has the characteristics of inline elements, inline blocks, and block-level elements.

Replacement elements generally have internal dimensions, so they have width and height, which can be set

For example, if you don't specify

Width and height are displayed according to their internal dimensions, that is, the width and height of the picture when it is saved

For form elements, browsers also have default styles, including width and height

Belongs to an inline replacement element. Height/width/padding/margin is available. The effect is equal to the block element

Thank you for your reading, the above is the "html5 img is not a block-level element" content, after the study of this article, I believe you on the html5 img is not a block-level element of this problem has a deeper understanding, the specific use of the situation also needs to be verified by practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.