Home >Web Front-end >Front-end Q&A >What is the css statement to convert an inline element to a block element
What is the css statement to convert an inline element to a block element
- 青灯夜游Original
- 2022-01-20 12:01:281870browse
The css statement to convert inline elements to block elements is "inline element {display: block;}". The display attribute is used to define the type of display box generated by the element when creating a layout. When the value of this attribute is "block", the specified element will be displayed as a block-level element type.
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
According to CSS display classification, HTML elements are divided into three types: block elements, inline elements, and inline block elements.
In CSS, you only need to set the display:block style to the inline element to convert it into a block element.
The display attribute is used to define the type of display box generated by the element when creating a layout. For document types such as HTML, using display carelessly can be dangerous, as it may violate the display hierarchy already defined in HTML. For XML, since XML doesn't have this kind of hierarchy built in, all display is absolutely necessary.
block: This element will be displayed as a block-level element, with line breaks before and after this element.
#inline: Default. This element will be displayed as an inline element with no line breaks before or after the element.
#inline-block: Inline block element. (New value in CSS2.1)
css Set inline style to block element example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
span {
background-color: #2cde57;
}
.span1 {
display: block;
width: 1000px;
}
</style>
</head>
<body>
<span>第一个span，内联元素</span>
<span>第二个span，块元素</span>
</body>
</html>
(Learning video sharing: css video tutorial)
The above is the detailed content of What is the css statement to convert an inline element to a block element. For more information, please follow other related articles on the PHP Chinese website!