HTML——<div>、<span><p>、<br>以及<span>之间的关系

<p>

是块级元素，前后断行,而且还要再隔一行.相当于断两行。

相应的代码及效果：`

<p>This is a paragraph</p>
<p>This is another paragraph</p>`

效果：



可以看到：p(段落)元素是块级的,前后断行,而且还要再隔一行.相当于断两行。

<p>和<br/>

的区别:

<p>相当于段落标签，<br/>

是换行标签。段落与段落之间一般会有一个行高的空白距离。而换行则不会使得行与行之间有一段空白的距离。这是二者在页面效果上的区别“`

<span>

—— 是用来来组合行内元素，以便通过样式来格式化它们。它所占的大小长度由它的内容来决定，而且不能设置宽高以及边距。主要作用就是对行内的元素进行分组或标识.

如:

<p><span class="aa">Harry Knowles</span></p>

div和span的联系:

1. div是块级元素， 实际上就是一个区域， 主要用于容纳其他标签。 默认的display属性是block

2. span是行内元素， 主要用于容纳文字。 默认的display属性是inline.

所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行。

eg.



二者联系：

div可以变为span (display:inline),这样div将变为行内元素

span也可以变为div(display:block),这样span将变为块级元素，默认占一行，而且可以设置宽高

同时，两者要想实现既可以设置宽高，边距，又可以不占一行，则display:inline-block