本教程操作环境：windows7系统、css3&&html5版、dell g3电脑。
<!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>
可以看出：
div是块状元素，独占一行；而span是内联元素，元素设置宽高。
而那么怎么将它们改成行内块元素？
可以利用display属性，添加“display: inline-block;”样式即可。
div { width: 100px; height: 50px; background-color: #ffc0cb; display: inline-block;}span{ width: 100px; height: 50px; background-color: #ffaa7f; display: inline-block;}
推荐教程：html视频教程、css视频教程
以上就是html盒子模型元素怎么改成行内块元素的详细内容。