What is a block-level element?
In HTML, <div>, <p>, <h1>, <form>, <ul> and <li> are block-level elements.
Setting display:block is to display 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;}
##Block-level element features:
1. Each block-level element starts on a new line, and elements after it also start on a new 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.
Let’s look at a piece of code to set the a tag as a block element:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>!important</title>
<style type="text/css">
a{
display:block;
width:100px;
height:18px;
background-color:green; /*设置背景色*/
color:#fff; /*设置字体颜色*/
}
</style>
</head>
<body>
<a href="#">PHP中文网</a>
</body>
</html>
Next Section
