Is span a block element?-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

Is span a block element?

青灯夜游

Nov 17, 2020 am 10:45 AM

html span inline elements block element inline elements

span is not a block element, but an inline element (inline element), which can combine inline elements in the document. span only defines the content as a whole for operation, without affecting the layout and display, and span has no practical features. Its function is to surround other elements in the HTML code and specify styles for them.

Is span a block element?

(Recommended tutorial: html tutorial)

span is not a block element, but an inline element (inline element ), mainly used to accommodate text. span is used to combine inline elements in the document.

Span only defines the content as a whole for operation, without affecting the layout and display, and span has no practical features. Its function is to surround other elements in the HTML code and specify styles for them.

Tags have no fixed format. It only changes visually when you apply a style to it. If you don't apply styles to , the text in the element will not be visually different from other text.

Tags provide a way to isolate a portion of text or a portion of a document.

Example:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
</head>
<body>
<p>我的母亲有 <span style="color:blue;font-weight:bold">蓝色</span> 的眼睛，我的父亲有 <span style="color:darkolivegreen;font-weight:bold">碧绿色</span> 的眼睛。</p>
</body>
</html>

Copy after login

Rendering:

Is span a block element?

##Block elements, inline elements, inline elements Block elements:

elements are labels. There are three commonly used labels in layout, block elements, inline elements, and inline block elements. Only by understanding the characteristics of these three elements can you master the page. layout.

1. Block element:

Block element can also be called row element. Commonly used tags in layout, such as: div, p, ul, li, h1-h6, etc. are all Block element, its behavior in layout:

(1) Supports all styles

(2) If the width is not set, the default width is 100% of the parent width

(3) The box occupies one line, even if the width is set

Code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>块元素</title>
    <style type="text/css">
        .box{
            background-color: gold;
            /*width:300px;*/
            /*height:200px;*/
        }

        .box2{
            background-color: green;
            /*width:300px;*/
            /*height:200px;*/
        }
    </style>
</head>
<body>
    <div>div元素</div>
    <p>p元素</p
</body>
</html>

Copy after login

Page display effect:

Is span a block element?

2, inside Inline elements:

Inline elements can also be called inline elements. Tags commonly used in layout, such as: a, span, em, b, strong, i, etc. are all inline elements. They are used in layout Behavior in:

(1) Supports some styles (width, height, margin top and bottom, padding top and bottom are not supported)

(2) Width and height are determined by content

( 3) The boxes are combined in one line

(4) The code is wrapped, and there will be a gap between the boxes

(5) The child element is an inline element, and the parent element can use the text-align attribute to set the child Elements facing each other horizontally

Methods to solve the gap between inline elements:

(1) Remove the line breaks between inline elements

(2) Change the parent of the inline element Level font-size is set to 0, and the inline element itself sets font-size

Code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>内联元素</title>
    <style type="text/css">
        .box{
            width:500px;
            height:400px;
            border:1px solid #000;
            margin:50px auto 0;

            font-size:0;  /* 解决内联元素间隙 */
        }

        .box div{
            width:100px;
            height:100px;
            margin:10px;
            background-color:gold;
        }

        .box a{
            background-color:gold;
            /*
            width:300px;
            height:200px;
            设置宽高完全不起作用 */

            /*
            margin:100px 20px;
            没有上下的边距，只有左右的边距 */

            /*padding:10px 10px;*/
            /* padding的上下不应该起作用的，却出现了bug */

            font-size:16px;/* 解决内联元素间距 */
        }

        .box2{
            width:500px;
            height:100px;
            border:1px solid #000;
            margin:50px auto 0;
            text-align:center;
        }
    </style>
</head>
<body>
    <div>
        <div></div>
        <div></div>
        <a href="#">链接文字一</a><a href="#">链接文字二</a>  /* 取消间隙 */
        <a href="#">链接文字三</a>
        <a href="#">链接文字四</a>
        <a href="#">链接文字五</a>
    </div>

    <div>
        <a href="#">链接文字</a>
    </div>
</body>
</html>

Copy after login

3. Inline block element:

Inline block element, Also called inline block elements, it is a new element type. Existing elements do not fall into this category. The img and input elements behave like this element, but they are also classified as inline elements. We can use the display attribute to block elements Or inline elements are converted into such elements. Their behavior in layout:

(1) Support all styles

(2) If the width and height are not set, the width and height are determined by the content

(3) Box Together

(4) The code breaks, and the box will produce spacing

(5) The child element is an inline block element, and the parent element can use the text-align attribute to set the horizontal alignment of the child element .

These three elements can be converted into each other through the display attribute. However, in actual development, block elements are used more often, so we often convert inline elements into block elements, and a small amount into inline elements. When you want to use inline elements, use inline elements directly instead of converting block elements.

For more programming-related knowledge, please visit:

Programming Learning Website! !

The above is the detailed content of Is span a block element?. 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