What is a block-level element? In HTML, <div>, <p>, <h1>, <form>, <ul> and <li> are block-level elements. Setting display:block displays the element as a block-level element. The following code converts the inline element a into a block element, so that the a element has the characteristics of a block element.
a{display:block;}
Characteristics of block-level elements:
1. Each block-level element starts on a new line, and subsequent elements also start on a new line. Start a line. (Really overbearing, a block-level element occupies one row)
2. The height, width, line height, and top and bottom margins of the element can be set.
3. If the width of an element is not set, it is 100% of its parent container (the same as the width of the parent element), unless a width is set.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>内联块状元素</title>
<style type="text/css">
div,p{background:pink;}
</style>
</head>
<body>
<div>div1</div>
<div>div2</div>
<p>段落1段落1段落1段落1段落1</p>
</body>
</html>
Next Section