HTML <div> and <span>

HTML block-level elements <div> and inline elements <span>

##The width of block-level elements fills the entire visible area of the browser, Generally, there can only be one block-level element in a line

The width of an inline element is generally based on the text content within the element. Multiple inline elements can be placed within a block-level element

Example

Let’s first look at the characteristics of the block-level element <div> and the inline element <span>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
</head>
<body>
<div style="border: 1px solid red;">
    hello
</div>
<span style="border: 1px solid blue;">world</span>
</body>
</html>

Program running results:

##Block-level elements<div>

Block-level elements will occupy one line by default. , the width will automatically fill the width of the parent element. Therefore, multiple cross-level elements are displayed on multiple lines from top to bottom.

Block-level elements: div, p, form, ul, li, ol, dl, table…

Inline element<span>

Inline The element will not occupy an exclusive line, and its width will change according to the content inside. Multiple in-line elements will be arranged in a row next to each other, and will not be broken until one row cannot fit.

Inline elements: span, strong, em, br, img, input, label, select, textarea, cite……

HTML grouping tag

## <div> defines the area of the document, block-level <span>Used to combine inline elements in the document, inline elements (inline)

Tag	Description

##We learned earlier There are so many tags. In the next section, we will teach you how to use those tags to make a simple web page layout

Continuing Learning

new file

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <div style="border: 1px solid red;"> div 块级元素 </div> <span style="border: 1px solid blue;">span行内元素</span> </body> </html>

submit Reset Code

Automatic operation

HTML <div> and <span>

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]