In HTML, <span>, <a>, <label>, <strong> and <em> are typical inline elements (inline elements). Of course, block elements can also be set to inline elements through code
display:inline
##inline Element features:
1. It is on the same line as other elements;
2. The height, width and top and bottom margins of the element cannot be set;
3. The element The width of is the width of the text or image it contains and cannot be changed.
Let’s write a piece of code below. The width and height can be set for block elements, but the width and height cannot be set for inline elements.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
a{
width:100px;
height:50px;
background-color:green; /*设置背景色*/
color:#fff; /*设置字体颜色*/
}
</style>
</head>
<body>
<a href="#">PHP中文网</a>
</body>
</html>Look at the above code, a is an inline element, When we set the width and height, it has no effect. Converting it to block elements will have obvious effects.
Let’s write an example below to convert block elements into inline elements
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
display:inline; /*转换成内联元素*/
/*转换成内联元素之后，我们设置宽高，背景色，文字颜色*/
width:300px;
height:200px;
background-color:green;
color:red;
}
</style>
</head>
<body>
<div>欢迎大家来到php中文网</div>
</body>
</html> Above In the code, after the block element is converted into an inline element, the width and height cannot be set
Next Section
