Block-level elements and inline elements are two basic elements that are common in layout, but not many people have studied their nuances in depth.
Common block-level elements: div p form ul ol li, etc.;
common in-line elements: span stronhem;
their main differences are as follows:
1. Block-level elements occupy a line by themselves and the width will occupy the width of the parent element, and inline elements It will not occupy a single line, and adjacent inline elements can be arranged on the same line.
As shown in the figure:
copy code
<head>
<meta charset="UTF-8">
<title>test</title>
<style type="text/css">
</style>
</head>
<body>
<p> Block-level element 1</p>
<p>Block-level element 2</p>
<span>Inline element 1</span>
<span>Inline element 2</span>
</body>
Copy code
2. Block-level elements can set weith and height, inline elements set width and height invalid, and block-level elements still occupy a line even if the width is set.
Figure:
Copy code
<head>
<meta charset="UTF-8">
<title>测试</title>
<style type="text/css">
p{background-color: red;height: 50px;width: 50%;}
div{background-color: green;height: 50px;width: 40%;}
span{background-color: gray;height: 70px;}
strong{background-color: blue;height: 70px;}
</style>
</head>
<body>
<p>块级元素一</p>
<div>块级元素二</div>
<span>行内元素一</span>
<strong>行内元素二</strong>
</body>
复制代码
3.Block-level elements can set margin and padding properties. Horizontal margins and paddings of inline elements such as margin-left and padding-right can produce margin effects, but vertical ones such as padding-top and margin-bottom will not produce margins. Effect <head>
Copy code
<meta charset="UTF-8">
<title>测试</title>
<style type="text/css">
p{background-color: red;height: 50px;width: 50%;padding: 20px;margin: 20px;}
div{background-color: green;height: 50px;width: 40%;;padding: 20px;margin: 20px;}
span{background-color: gray;height: 70px;padding: 40px;margin: 20px;}
strong{background-color: blue;height: 70px;padding: 40px;margin: 20px;}
</style>
</head>
<body>
<p>块级元素一</p>
<div>块级元素二</div>
<span>行内元素一</span>
<strong>行内元素二</strong>
</body> 4. Finally, the relevant attributes of block-level elements and inline elements: display
Copy code
The block-level elements correspond to display:block, and the inline elements correspond to display:inline. You can toggle between inline and block-level elements by modifying the element's display property.
As shown in the figure:
Add an attribute: display: inline-block; it can make the element have the characteristics of block-level elements and inline elements: it can set the length and width, make padding and margin take effect, and can be side by side with other inline elements. is a very useful property
Detailed analysis of css block-level elements and inline elements
Guess you like
Origin http://10.200.1.11:23101/article/api/json?id=326980902&siteId=291194637
Ranking