We all know that there is a block attribute value in the display attribute, so what does this display:block mean? How can it be used? This article will introduce to you the meaning of display:block and its usage. Friends in need can refer to it.
First of all, let’s take a look at what display:block means?
In fact, what does the css display attribute mean? Detailed explanation of the display attribute in css In this article, we have already talked about the meaning of the display:block attribute. Simply put, setting display:block is to display the element as a block-level element.
After reading the meaning of display:block, if you still don’t understand it, then let’s read on and see How to use display:block? Through the usage of display:block, we can further understand the meaning of display:block.
Recommended Manual:CSS Online Manual
Usage of display:block:
For all block-level elements, there is no need to use display:block to define, because the default attribute of block-level elements is block; so display:block is more commonly used like and , etc. Among elements that are not block-level elements, let’s take a look at specific examples:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
span{
width: 200px;
height: 30px;
}
</style>
</head>
<body>
<span style="background-color: red ">php中文网</span>
<span style="background-color: red ">php中文网</span>
<span style="background-color: red ">php中文网</span>
</body>
</html>The above code is not defined with display:block, and the effect is as follows:
It can be clearly seen from the above renderings that setting the width and height of span is useless, and the content is all on the same line. Let’s take a look at what it will look like using display:block definition. The code As follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
span{
width: 200px;
height: 30px;
display: block;
}
</style>
</head>
<body>
<span style="background-color: red ">php中文网</span>
<span style="background-color: red ">php中文网</span>
<span style="background-color: red ">php中文网</span>
</body>
</html>The effect of using display:block is as follows:
The above effects can be clearly seen that they are effective for the width and height settings and are also exclusive to One line.
Recommended related articles:
1.How to use display in css
2. Solution to the problem that the width cannot be set to 100% when setting the display:block attribute of the img tag
Related video recommendations:
1.CSS video tutorial - Jade Girl Heart Sutra Edition
After reading the content introduced above, do you now have a deeper understanding of display:block? For more knowledge about the display:block attribute, you can refer to php Chinese Net’s css learning manual.
The above is the detailed content of What does display block mean? how to use?. For more information, please follow other related articles on the PHP Chinese website!
Anchor Positioning Just Don't Care About Source OrderApr 29, 2025 am 09:37 AMThe fact that anchor positioning eschews HTML source order is so CSS-y because it's another separation of concerns between content and presentation.
What does margin: 40px 100px 120px 80px signify?Apr 28, 2025 pm 05:31 PMArticle discusses CSS margin property, specifically "margin: 40px 100px 120px 80px", its application, and effects on webpage layout.
What are the different CSS border properties?Apr 28, 2025 pm 05:30 PMThe article discusses CSS border properties, focusing on customization, best practices, and responsiveness. Main argument: border-radius is most effective for responsive designs.
What are CSS backgrounds, list the properties?Apr 28, 2025 pm 05:29 PMThe article discusses CSS background properties, their uses in enhancing website design, and common mistakes to avoid. Key focus is on responsive design using background-size.
What are CSS HSL Colors?Apr 28, 2025 pm 05:28 PMArticle discusses CSS HSL colors, their use in web design, and advantages over RGB. Main focus is on enhancing design and accessibility through intuitive color manipulation.
How can we add comments in CSS?Apr 28, 2025 pm 05:27 PMThe article discusses the use of comments in CSS, detailing single-line and multi-line comment syntaxes. It argues that comments enhance code readability, maintainability, and collaboration, but may impact website performance if not managed properly.
What are CSS Selectors?Apr 28, 2025 pm 05:26 PMThe article discusses CSS Selectors, their types, and usage for styling HTML elements. It compares ID and class selectors and addresses performance issues with complex selectors.
Which type of CSS holds the highest priority?Apr 28, 2025 pm 05:25 PMThe article discusses CSS priority, focusing on inline styles having the highest specificity. It explains specificity levels, overriding methods, and debugging tools for managing CSS conflicts.
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
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
MantisBT
Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.
MinGW - Minimalist GNU for Windows
This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.
SublimeText3 English version
Recommended: Win version, supports code prompts!
PhpStorm Mac version
The latest (2018.2.1) professional PHP integrated development tool
EditPlus Chinese cracked version
Small size, syntax highlighting, does not support code prompt function
