Is span a block element in html?-Front-end Q&A-php.cn

Home

Web Front-end

Front-end Q&A

Is span a block element in html?

青灯夜游

Nov 17, 2021 pm 05:36 PM

html span block element inline elements

In HTML, span is not a block element, but an inline element (inline element). The span element is mainly used to accommodate text. Multiple span elements can be displayed in one line; and the width and height of the span element are determined by the content and cannot be set with the width and height attributes. The block element occupies an exclusive line, and the width and height can be set.

Is span a block element in html?

The operating environment of this tutorial: Windows 7 system, HTML5 version, Dell G3 computer.

span is not a block element, but an inline element (inline element). is mainly used to accommodate text. span only defines the content as a whole and operates it without affecting the layout and display.

Example:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			span {
				width: 100px;
				height: 100px;
			}
			
		</style>
	</head>
	<body>
		<span>你好</span> <span>hello</span>
	</body>
</html>

Copy after login

Is span a block element in html?

It can be seen that multiple span elements can be displayed in one line; and the width and height of the span element are inclusive Determined by the content, the width and height attributes cannot be set. And these are the characteristics of inline elements.

Block-level elements

The display attribute of block-level elements is usually block. Why do I say usually? Because the display attribute of li is list. The display attribute of -item and table is table, but they are all block-level elements.

Characteristics of block-level elements

Block-level elements occupy an exclusive line
The elements can be set Width, height, line height, margins, padding
Block-level elements occupy the entire space of their parent element (container)
Can accommodate inline elements and other block elements

Why do block-level elements have to occupy their own line? Because the width of the block-level element will occupy the entire width of the parent element, there is no extra space to display other elements, and you can only start a new line.

Common block-level elements are:

<div>
<p>
<h1>~<h6>
<ol>
<ul>
<dl>
<table>
<address>
<blockquote>
<form>

Copy after login

Inline elements

The display attribute of inline elements is: inline

Characteristics of inline elements

Displayed side by side with other inline elements on one line;
The width and height of the element cannot be set, but the line height can be set. Line-height
The width of the element is the width of the text or picture it contains and cannot be changed.
Inline elements can only accommodate text or other inline elements
Inline elements can set horizontal margins, but vertical margins cannot be set , inner margin padding can be set horizontally and vertically

Common inline elements:

<a>
<span>
<br>
<i>
<em>
<strong>
<label>
<q>
<var>
<cite>
<code>

Copy after login

Recommended tutorial: "html video tutorial"

The above is the detailed content of Is span a block element in html?. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn