How to change html box model elements into inline block elements

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.

	
		
		

	
	
		
div元素
		span span
	

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!