HTML：p，一个有陷阱的元素

<p>元素（或者说 HTML 段落元素）表示文本的一个段落。该元素通常表现为一整块与相邻文本分离的文本，或以垂直的空白隔离或以首行缩进。另外，<p> 是块级元素。

在HTML中<p>元素是表示段落，主要用于文章分段时使用，如果一定要用<p>标记在布局上，也没有错误，但必须要知道它的陷阱，不然会带来一些意想不到的布局问题。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>HTML：p，一个有陷阱的元素</title><style type="text/css">body{font-size: 14px;margin: 0;padding: 0;font-family: "Helvetica", "Microsoft YaHei", sans-serif;color: #fff;}div{padding: 10px;background-color: #09BB07;}p{padding: 10px;background-color: #f0ad4e;margin: 0 0 10px 0;}</style>
</head>
<body><p><span>helang.love@qq.com</span></p><p><div>1846492969</div></p>
</body>
</html>

示例图：

在示例代码中，<div>元素并没属于<p>子元素，还多出了一组<p>标记，导致出现了图示的错误样式。

在 MDN web docs 有写到“使用CSS margin属性去改变段落之间的间隙，不要在段落之间插入空的段落元素或者<br>元素。”，经测试，<br>标记并未引起明显的问题，但是<p>标记中不允许有块元素出现，如<p>、<div>、<h1>等。通过css将元素修改为非块级元素也是不可取的，因为浏览器在解析页面时，先是解析DOM节点后才会计算CSS属性的。

小编建议：<p>是使用于文章中表示分段，如果在不能确定内容中不出现块元素时，尽量不要使用<p>标记，以免带来不必要的布局问题的。在页面布局时更不要使用<p>元素，尽量使用<div>这类没有语义的标记做页面布局。

作者：黄河爱浪 QQ：1846492969，邮箱：helang.love@qq.com

公众号：web-7258，本文原创，著作权归作者所有，转载请注明原链接及出处。

更多精彩文章，请扫下方二维码关注我的公众号

HTML：p，一个有陷阱的元素相关推荐

ACMNO.19 C语言-对角求和求一个3×3矩阵对角线元素之和。输入矩阵输出主对角线副对角线元素和样例输入 1 2 3 1 1 1 3 2 1 样例输出 3 7
这个我做了改进,可以实现NXN的矩阵.求出对角线之和! 只需要修改定义的define z的值就好! 接下来,进入正题! 题目描述: 求一个3×3矩阵对角线元素之和. 输入矩阵输出主对角线副对角 ...
每天一个JavaScript实例-获取元素当前高度
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
Python：利用collections库实现统计单个字或单个字母的频率统计并进行降序输出、统计一个列表内重复元素并以字典形式输出
Python:利用collections库实现统计单个字或单个字母的频率统计并进行降序输出.统计一个列表内重复元素并以字典形式输出目录利用collections库实现统计单个字或单个字母的频率统计 ...
tensorflow tf.data.Dataset.from_tensor_slices() （创建一个“数据集”，其元素是给定张量的切片）
from tensorflow\python\data\ops\dataset_ops.py @staticmethoddef from_tensor_slices(tensors):"&q ...
ITK:创建一个二进制球结构元素
ITK:创建一个二进制球结构元素内容提要 C++实现代码内容提要创建一个椭圆形结构元素 C++实现代码 #include "itkBinaryBallStructuringElemen ...
编程之美--读书笔记--返回一个数组中所有元素被第一个元素除的结果
笔试题目1:写一个函数,返回一个数组中所有元素被第一个元素除的结果很多人会想到如下: void DivAarry(int *pArray,int size) { for(int i=size-1;i ...
python取列表前几个元素_Python下几种从一个序列中取出元素的方法
使用Python进行数据处理时,有时候会有这样的操作,比如从一个列表或者numpy array中随机取出一个元素,对一个列表中的元素进行shuffle,等等.虽然这些操作也可以通过编写很简短的程序完成 ...
java定义一个方法，返回一个整数数组的元素平均值
java定义一个方法,返回一个整数数组的元素平均值 /*** 定义一个方法* 返回一个整数数组的元素平均值*/ public class Test25 {public static double av ...
java定义一个方法，返回一个整数数组的元素最小值
java定义一个方法,返回一个整数数组的元素最小值 /*** 定义一个方法* 返回一个整数数组的元素最小值*/ public class Test24 {public static int minAr ...

HTML：p，一个有陷阱的元素

示例代码：

示例图：

HTML：p，一个有陷阱的元素相关推荐

最新文章

热门文章