p标签换行导致的问题

.p5{height:24px;width:180px;line-height:24px;font-size:12px;margin-left:24px;
}

上面是css

下面是html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>day3</title>
<link rel="stylesheet" type="text/css" href="css/day3.css" />
</head>
<body>
<p class="p5">培养一流的人才，铸造一流的工程，实现员工与企业的共同发展</p>
<img src="data:images/b.jpg" /></body>
</html>

这样写之后，出现的问题是，img的图片出现在p标签的上面，如下图所示，这是为什么呢？

灰色部分的是图片，因为p标签是块状元素，本来图片应该出现在第二行文字的下面，但是，却出现在了第二行文字的上面，经过分析，因为我给p标签的样式设置了宽度24px和高度，设置的行高也是24px，又因为p标签是块状元素，虽然，在视觉上看起来因为p标签放不下那么多的字而换行，但，实际上，p标签的所占的空间就是由给他设置的宽度和高度组成的地方，所以，img标签认为第一行文字下面就是一片空的地方，他可以使用这块地方，所以，就出现在第二行字的上面了

由此看来，当我们使用p标签的时候，如果设置了行高的话，我们可以不用设置p标签的高度，因为p是块状元素，他的高度会由他的内容撑起来，所以，我在上面给p标签设置高度就是画蛇添足，不仅没有任何好的作用，还带来了麻烦。

同理可得，块状元素应该都这样处理

p标签换行导致的问题相关推荐

Django 模板标签换行导致异常的处理 linebreaksbr
Django 模板标签换行导致异常的处理 linebreaksbr 参考文章: (1)Django 模板标签换行导致异常的处理 linebreaksbr (2)https://www.cnblog ...
小米商城练习(鼠标移入阴影偏移向上抬起浮动清除),边框盒(怪异盒子,ie盒子),因为换行导致出现空格距离怎么解决？
一.鼠标移入阴影偏移向上抬起 .效果块i:hover{/* background-color: orangered; */box-shadow: 4px 4px rgb(234, 234, 234) ...
oracle clob 查询换行,sqoop clob从Oracle导入到hive 回车换行导致记录增多
sqoop clob从Oracle导入到hive 回车换行导致记录增多发布时间:2020-06-27 02:45:01 来源:51CTO 阅读:3159 作者:jackwxh sqoop imp ...
antd-vue中的form表单label标签for导致点击文字触发输入框解决方案
antd-vue中的form表单label标签for导致点击文字触发输入框解决方案参考文章: (1)antd-vue中的form表单label标签for导致点击文字触发输入框解决方案 (2)http ...
echarts 饼图标签过多导致显示不全
先看一下缺失效果: 可以看到,紫色和红色的数据是没有显示出来的,这是因为标签过多导致标签重叠了,只要让重叠的标签显示出来就可以了,配置里面加上hideOverlap:false ...series: ...
oracle asm磁盘标签丢失导致整个集群和数据库启动失败
oracle asm磁盘标签丢失导致整个集群和数据库启动失败应用环境描述一.硬件 1. 服务器:2台dell r610-16G内存.2颗6核xeon cpu.2个146G sas盘,做了raid1 ...
换行导致无法模拟SQL注入
在使用 Mybatis 时,取值时,应尽量使用 # 取值,因为当使用 $ 取值时,会出现SQL注入的风险. 比如下面的登录校验语句,如果用户名输入 '' or 1=1 #,可以实现SQL注入 < ...
php div标签换行符,br【html换行】标签元素
html [html换行]html br标签,html钳制换行标签br学习和主宰.从br根蒂根基明确到实例树模相熟掌握html换行标签br. 网页文章排版时可能无意偶尔紧要对笔墨提行(换行).这个时分 ...
svg中text标签换行显示,并实现拖拽移动text标签
如图,项目中需要一个在线批阅的功能,批阅者可以在线给word文档进行批注和打勾打叉等功能,后来又追加移动批注和批注换行的功能,想法就是用户通过\n或者按钮等操作对文本进行一个切割, 例如图片中的文 ...

p标签换行导致的问题

p标签换行导致的问题相关推荐

最新文章

热门文章