The following summarizes three methods for converting inline elements to block-level elements:
(1)display
(2)float
(3)position(absolute and fixed)
Speak less and do more, run the following code to see the effect:
1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta charset="UTF-8" /> 5 <meta http-equiv="X-UA-Compatible" content="ie=edge" /> 6 <title>行内元素转为块级元素</title> 7 <style type="text/css"> 8 *{ 9 margin: 0;10 padding: 0;11 font-size: 20px;12 color: red;13 }14 div{15 margin-top: 20px;16 }17 a{18 display:block;19 }20 span{21 float: left; 22 }23 i{24 position:absolute;25 }26 </style>27 </head>28 <body>29 <div>30 方法一：使用display31 </div>32 <a href="#">a标签转为块级元素</a>33 <div>34 方法一：使用float35 </div>36 <span>span标签转为块级元素</span>37 <div>38 方法一：使用position（absolute和fixed）39 </div>40 <i>i标签转为块级元素</i>41 </body>42 </html>
Check whether it is converted to a block-level element by inspecting the element:
The above is the detailed content of Summarize three methods of converting inline elements to block-level elements. For more information, please follow other related articles on the PHP Chinese website!
How to find the maximum and minimum value of array elements in Java
Cloud server usage tutorial
The relationship between js and vue
How to solve the problem that teamviewer cannot connect
What are the reasons why a mobile phone has an empty number?
Introduction to strings
Mini program path acquisition
What should I do if the web video cannot be opened?
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
