Introduction to block tags and inline tags in HTML
HTML tags are generally divided into two types: block tags and inline tags. They are also called block elements and inline elements.
Block element
Each block element usually occupies a whole row or multiple whole rows by itself. You can set width, height, alignment and other attributes for it. It is commonly used The construction of web page layout and web page structure. And block-level element containers can accommodate multiple nested block-level tags or inline tags. Common block elements include
~,
,
- ,
- , etc., among which the tag is a The most commonly used block elements in .
Inline elements
Inline elements do not occupy an independent area and only rely on their own font size and image size to support the style of the structure. Inline elements cannot nest block-level tags, only other inline tags. Common inline elements include , , , ,
,, , , , etc., where the tag is the most commonly used inline element.1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>display</title> 6 </head> 7 <body> 8 <div>我是一个div</div> 9 <span>我是一个span</span>10 <strong>我是一个strong</strong>11 </body>12 </html>
Copy after login
If you want the strong tag to be on its own line like the div tag, is it possible? The answer is of course. This requires the use of the display attribute. The more commonly used values are none, inline, block and inline-block. These are worth explaining as follows
none: This element is not displayed and is moved in the document. remove.
block: This element is displayed as a block-level element: with line breaks before and after, occupying its own line. Inline element → block element
inline : This element is displayed as inline elements: 1 next to 1. Block element → Inline element
inline-block: Typesetting according to inline tags, but the width and height can be set, and the height can affect the line heightblock attribute
Now let’s put the above Try turning the strong element into a block-level element
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>display</title> 6 7 <style type="text/css"> 8 strong { 9 display: block;10 }11 </style>12 </head>13 <body>14 <div>我是一个div</div>15 <span>我是一个span</span>16 <strong>我是一个strong</strong>17 </body>18 </html>Copy after logininline attribute
You can see that after setting the display attribute to block , the strong tag occupies its own line. On the contrary, if you make the div element an inline element, you need to use the inline value of the display attribute
1 <style type="text/css">2 strong {3 display: block;4 }5 6 div {7 display: inline;8 }9 </style>Copy after loginYou can see that the div tag and span are in The same line shows the
inline-block attribute
Let’s take a look at the inline-block value, which literally means inline block-level elements, introduced from the beginning Knowing that the width and height of inline elements can only be supported by their own content, here we first set the width and height of the span tag
span {width: 200px;height: 100px;background-color: red; }Copy after loginFrom the browser Judging from the running results, the width and height set for the span have no effect. Now set the display attribute inline-block for the span to see
span {width: 200px;height: 100px;background-color: red;display: inline-block; }Copy after loginnone attribute
You can see that the set width and height have taken effect, giving the illusion of a block-level element, but the span tag here is still an inline element. Sometimes, we need to temporarily hide elements on the page. In this case, we can set the display attribute of the element to none. For example, we need to hide the div element on the page
div {display: none; }Copy after login It should be noted that the visibility attribute in CSS can also control whether the page elements are displayed or not
div {visibility: hidden; }Copy after loginThrough the browser The following conclusion can be easily drawn from the display results
display: none; The setting directly removes the current label from the page without affecting the layout of the page, and visibility : hidden This setting just means that the element is not displayed on the page, but it still takes up space on the page.
The above is the detailed content of Introduction to block tags and inline tags in HTML. For more information, please follow other related articles on the PHP Chinese website!
- ,
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Fujifilm X-M5 price expectations rise as leaked selfie display adds complexity to the formerly affordable camera line
Sep 07, 2024 am 09:34 AM
Fujifilm fans were recently very excited at the prospect of the X-T50, since it presented a relaunch of the budget-oriented Fujifilm X-T30 II that had become quite popular in the sub-$1,000 APS-C category. Unfortunately, as the Fujifilm X-T50's launc
What does placeholder mean in vue
May 07, 2024 am 09:57 AM
In Vue.js, the placeholder attribute specifies the placeholder text of the input element, which is displayed when the user has not entered content, provides input tips or examples, and improves form accessibility. Its usage is to set the placeholder attribute on the input element and customize the appearance using CSS. Best practices include being relevant to the input, being short and clear, avoiding default text, and considering accessibility.
Samsung: New, large display based on E Ink technology displays colors and communicates wirelessly
Jun 19, 2024 pm 03:37 PM
We frequently report on devices based on displays with electronic ink, such as e-readers. The technology offers a number of advantages: it can be read in bright environments without a backlight, and it only requires power when switching without light
What does span mean in js
May 06, 2024 am 11:42 AM
The span tag can add styles, attributes, or behaviors to text. It is used to: add styles, such as color and font size. Set attributes such as id, class, etc. Associated behaviors such as clicks, hovers, etc. Mark text for further processing or citation.
What does rem mean in js
May 06, 2024 am 11:30 AM
REM in CSS is a relative unit relative to the font size of the root element (html). It has the following characteristics: relative to the root element font size, not affected by the parent element. When the root element's font size changes, elements using REM will adjust accordingly. Can be used with any CSS property. Advantages of using REM include: Responsiveness: Keep text readable on different devices and screen sizes. Consistency: Make sure font sizes are consistent throughout your website. Scalability: Easily change the global font size by adjusting the root element font size.
How to introduce images into vue
May 02, 2024 pm 10:48 PM
There are five ways to introduce images in Vue: through URL, require function, static file, v-bind directive and CSS background image. Dynamic images can be handled in Vue's computed properties or listeners, and bundled tools can be used to optimize image loading. Make sure the path is correct otherwise a loading error will appear.
What is node in js
May 07, 2024 pm 09:06 PM
Nodes are entities in the JavaScript DOM that represent HTML elements. They represent a specific element in the page and can be used to access and manipulate that element. Common node types include element nodes, text nodes, comment nodes, and document nodes. Through DOM methods such as getElementById(), you can access nodes and operate on them, including modifying properties, adding/removing child nodes, inserting/replacing nodes, and cloning nodes. Node traversal helps navigate within the DOM structure. Nodes are useful for dynamically creating page content, event handling, animation, and data binding.
What language is the browser plug-in written in?
May 08, 2024 pm 09:36 PM
Browser plug-ins are usually written in the following languages: Front-end languages: JavaScript, HTML, CSS Back-end languages: C++, Rust, WebAssembly Other languages: Python, Java
