Home >Web Front-end >Front-end Q&A >How to change html box model elements into inline block elements
How to change html box model elements into inline block elements
- 青灯夜游Original
- 2021-12-03 11:53:194266browse
In HTML, you can use the display attribute to change the box model element into an inline block element. This attribute can set the type of the element. When the value is "inline-block", the element can be set to "inline block" Element", syntax "box model element {display: inline-block;}".
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
div {
width: 100px;
height: 50px;
background-color: #FFC0CB;
}
span{
width: 100px;
height: 50px;
background-color: #ffaa7f;
}
</style>
</head>
<body>
<div>div元素</div>
<span>span</span> <span>span</span>
</body>
</html>
It can be seen that:
div is a block element and occupies one line; span is an inline element with a set width and height.
And how to change them into inline block elements?
You can use the display attribute and add the "display: inline-block;" style.
div {
width: 100px;
height: 50px;
background-color: #FFC0CB;
display: inline-block;
}
span{
width: 100px;
height: 50px;
background-color: #ffaa7f;
display: inline-block;
}
Recommended tutorials: html video tutorial, css video tutorial
The above is the detailed content of How to change html box model elements into inline block elements. For more information, please follow other related articles on the PHP Chinese website!