h3标签在容器顶部无法设置上下外边距的问题

最新推荐文章于 2023-08-24 22:06:58 发布
原创 最新推荐文章于 2023-08-24 22:06:58 发布 · 2.3k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#h3标签外边距 #margin

本文介绍了解决HTML中h3标签外边距与容器外边距重叠的问题，通过使用float:left;和overflow:hidden; zoom:1;的方法避免了高度塌陷，保持布局的正确性。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在模仿淘宝网页的时候，遇到h3标签在容器顶部时设置外边距与大容器的外边距重合。情况如下

<div class="w bgwh">
	 <div class="belt">
	      <h3 class="belth fl"><a href="#" class="lh24"><img src="img/beltT.png"></a></h3>
	      <a href="#" class=""></a>
	 </div>
</div>

(1)在网上搜索得出答案是把h3样式中添加display:inline的样式，然后悲剧了，发现无法设置行高。仔细观察淘宝发现其有设置了float:left;此时h3外边距能用了，并且宽度也能用了。

(2)不用设置行高，只需要在h3的容器中的样式中添加overflow: hidden; zoom:1;就可以设置宽度。并且belt的外边距与大容器bgwh的外边距不重合。

此问题属于高度塌陷问题详细的解决方法可以参考http://blog.youkuaiyun.com/qq_29104999/article/details/53504338他山之石可以功玉。


范之度
关注
HTML标签
weixin_45701868的博客
03-29 1680
目录 一、显示级分类 1、块级元素(block) 2、内联元素(inline) 3、内联块元素(inline-block) 二、文本类型的标签 三、块类型的文本标签 四、超链接 1、属性href: 指定跳转的路径 2、锚点：实现的页内跳转 五、排版类型的标签 1、p标签 2、div标签 3、span标签 4、dl自定义列表 5、有序列表 ​编辑 6、无序列表 7、img图片标签 8、图片映射 六、表单类型的标签 1.input标...
CSS与CSS3美化页面
AllenCode7的博客
12-27 1492
目录一、CSS简介1.1 什么是CSS?1.2 样式层叠次序二、CSS基础语法三、CSS使用方式四、CSS常用选择器五、CSS关系和属性选择器六、CSS伪类选择器七、CSS的尺寸和单位八、CSS字体与文本属性九、CSS背景属性十、CSS边框属性十一、CSS内外补白属性十二、CSS盒子模型实例十三、CSS定位属性十四、CSS布局属性十五、CSS实现导航十六、CSSflex弹性盒子介绍十七、CSS用户界面和多栏属性介绍十八、CSS表格和过度属性介绍十九、CSS旋转动画和媒体查询属性介绍二十、CSS字体图标的使用
html如何设置文字的外边距,css设置外边距的属性名是什么
weixin_35436993的博客
06-07 4563
属性名：1、margin，设置元素的所有外边距；2、margin-bottom，设置元素的下边距；3、margin-left，设置元素的左边距；4、margin-right，设置元素的右边距；5、margin-top，设置元素的上边距。本教程操作环境：windows7系统、CSS3版、Dell G3电脑。css 外边距属性margin：在一个声明中设置所有外边距属性margin-bottom：设置...
HTML怎么设置页面上下间距,html上下间距怎么调
weixin_39765695的博客
06-04 3441
html上下间距的调整方法：首先打开vscode，添加div；然后在div标签中的style属性中添加【line-height】属性值，修改这个值，以达到想要的高度。本教程操作环境：windows7系统、html5&&vscodev1.53.2.0版，DELL G3电脑。html上下间距的调整方法：1、打开vscode，创建一个H5规范的页面，用于演示html行间距的设置方式。如果...
h3标签标题居中
qq_30815659的博客
12-20 4911
<h3 class="up" id="two1" style="text-align:center" onmouseover="setContentTab('two',1,2)">注册</h3>
margin: 0 auto；外边距合并；外边距溢出；盒模型计算方式
weixin_51747462的博客
01-20 459
margin: 0 auto;外边距合并；外边距溢出；盒模型计算方式
<h1> ~ <h6> 自带的 上下边距 -webkit-margin-after: 1em; -webkit-margin-before: 1em;
飞翔的熊blabla
03-27 1027
h3自带的上下边距 (橘色) 把-webkit-margin-after: 0em; -webkit-margin-before: 0em; 上下边距就取消了
5服务支持：由以下部分构成 5.1顶部有一张高 384px宽 100%的图片，下边距为 23px 5.2常用功能部分:宽 1400px，下外边距 40px，标题下外边距为 20px,字体大小为 28px,文本水平垂直居中字体颜色为#000。内容是 5个子项组成（flex水平对齐，平均分配）每个子项宽 200px高 200px背景色为#cedbf5，子项内容水平垂直对齐，字体大小为 20px，子项内容的图片的盒子背景图大小为 60px不重复。鼠标移入子项时字体颜色变成#fff,背景色为#f08300，放大 1.1倍，内容图片盒子的背景图切换成白色，子项有过渡效果。 5.3投诉建议部分：宽 1200px。标题下外边距为 30px,字体大小为 30px,文本水平垂直居中字体颜色为#000。下面有个小标题，水平垂直居中，内边距为 10px,左右外边距为 20px,字体颜色为#000。小标题高亮：字体颜色为#f08300下边框 1px实线颜色#f08300。内容部分标题的*号是字体颜色红色，其他字体颜色是#767676，上下内边距为 7px,字体大小是 16px。姓名，手机，邮箱，运货单，问题内容的包裹输入框的盒子宽 450px,左右内边距 12px上下内边距 6px，（flex 一行两个水平对齐。背景色为#767676，输入框宽 100%，高100%。输入框下面的提示内边距为上下 15px，左 10px,下外边距 8px,字体大小为 12px。问题内容部分：输入框数文本域，默认 3行文字高度，只能上下拉动不能左右拉动。宽度 100%。最后有两个按钮宽 180px,高 40px，字体颜色为#fff，背景色为#f08300，圆角 20px文本水平垂直对齐两端对齐。
03-22
然后是5.2常用功能部分，宽度1400px，下外边距40px，标题的字体大小28px，下外边距20px。内容有5个子项，使用flex水平对齐，平均分配。每个子项宽高200px，背景色#cedbf5，字体20px，水平和垂直居中。子项内的图片...
两个h3 怎么并排存在
03-22
另外，用户的问题是关于两个h3标签，可能需要设置父容器的宽度，或者让h3自动调整宽度。比如，使用flex: 1让它们平分空间，或者设置固定宽度。 总结一下，可能的解决方案有： 1. 使用Flexbox：父容器设置display: ...
任务分发看板UI参考图 页面整体为桌面端Web后台管理界面，适配设备为1920px宽桌面端，页面容器宽度1200px，居中显示，左右边距360px，背景色#FFFFFF。 顶部导航栏 位置：页面最顶部，宽度100%（1920px），高度60px，背景色#FFFFFF，底部边框1px solid #E5E7EB。 内容：左侧有蓝色汉堡菜单图标（尺寸24x24px），右侧横向排列多个标签页文字，包括“首页”“项目立项管理”“项目计划管理”“项目验收管理”“任务分发管理”“任务开发管理”“任务分发看板”，当前选中标签为“任务分发看板”，文字颜色#1E40AF，下方有2px宽、8px高的蓝色下划线（#3B82F6），未选中标签文字颜色#4B5563，字体大小14px，字体为Inter，各标签间距24px。 筛选区域 位置：导航栏下方，距离顶部导航栏20px，宽度100%（1200px），高度48px。 内容：从左到右依次排列筛选按钮组、日期输入框、确定按钮。 筛选按钮组：包含“本月”“本季度”“本年”“自定义”4个按钮，按钮为圆角矩形（圆角6px），未选中按钮背景色#F3F4F6，文字颜色#4B5563，选中按钮背景色#3B82F6，文字颜色#FFFFFF，按钮高度36px，宽度64px（“自定义”按钮宽度72px），字体大小14px，Inter字体，按钮间距12px。 日期输入框：“开始日期”和“结束日期”输入框，左侧有日历图标（尺寸16x16px，颜色#9CA3AF），输入框为白色背景，边框1px solid #E5E7EB，圆角6px，宽度140px，高度36px，内边距12px，文字颜色#1F2937，字体大小14px，Inter字体，两个输入框之间有“至”文字（颜色#6B7280，字体大小14px），间距12px。 确定按钮：蓝色圆角矩形按钮（#3B82F6），文字“确定”，白色字体，字体大小14px，Inter字体，高度36px，宽度80px，圆角6px，右侧距筛选区域边缘0px。 统计图表区域 位置：筛选区域下方，距离筛选区域24px，宽度100%（1200px），高度320px，包含三个图表，从左到右横向排列，各图表宽度占比32%、32%、32%，图表之间间距24px。 左侧：任务完成情况统计（柱状图） 容器：白色背景，圆角8px，边框1px solid #E5E7EB，内边距16px，高度320px。 标题：“任务完成情况统计”，文字颜色#1F2937，字体大小16px，Inter字体，加粗，位于容器顶部左侧，距离顶部内边距16px，距离左侧内边距16px。 图例：位于标题下方，距离标题12px，横向排列“未完成”（文字颜色#1E40AF，左侧有8x8px深蓝色方块#1E40AF）、“已完成”（文字颜色#3B82F6，左侧有8x8px浅蓝色方块#3B82F6），文字大小12px，Inter字体，间距16px。 柱状图：位于图例下方，距离图例20px，宽度100%，高度200px。X轴标签为“30日”“2日”“4日”“6日”“8日”“10日”“12日”“14日”“16日”“18日”“20日”“22日”“24日”“26日”“28日”“30日”，字体大小12px，颜色#6B7280；Y轴刻度0-100，间隔20，字体大小12px，颜色#6B7280；柱子为圆角矩形（顶部圆角4px），未完成柱子颜色#1E40AF，已完成柱子颜色#3B82F6，柱子宽度12px，柱子间距8px；每个柱子顶部居中显示具体数值（如“80”“75”等），字体大小12px，颜色#1F2937。 中间：责任人完成情况（条形图） 容器：白色背景，圆角8px，边框1px solid #E5E7EB，内边距16px，高度320px。 标题：“责任人完成情况”，文字颜色#1F2937，字体大小16px，Inter字体，加粗，位于容器顶部左侧，距离顶部内边距16px，距离左侧内边距16px。 图例：与左侧柱状图图例一致，位于标题下方，距离标题12px。 条形图：位于图例下方，距离图例20px，宽度100%，高度200px。Y轴标签为“吴十”“周九”“孙八”“钱七”“赵六”“王五”“李四”“张三”，字体大小12px，颜色#6B7280，右对齐；X轴刻度0-80，间隔20，字体大小12px，颜色#6B7280；条形为圆角矩形（右侧圆角4px），未完成条形颜色#1E40AF，已完成条形颜色#3B82F6，条形高度24px，条形间距8px；每个条形右侧显示具体数值（如“80”“70”等），字体大小12px，颜色#1F2937。 右侧：任务状态分布（饼图） 容器：白色背景，圆角8px，边框1px solid #E5E7EB，内边距16px，高度320px。 标题：“任务状态分布”，文字颜色#1F2937，字体大小16px，Inter字体，加粗，位于容器顶部左侧，距离顶部内边距16px，距离左侧内边距16px。 饼图：位于标题下方，距离标题32px，居中显示，直径160px。未完成区域占比约40%，颜色#1E40AF；已完成区域占比约60%，颜色#3B82F6；饼图中心显示两行文字，上行“已完成：60%”，下行“未完成：40%”，字体大小14px，颜色#1F2937，Inter字体，文字居中对齐。 图例：位于饼图下方，距离饼图20px，横向排列“已完成”（文字颜色#3B82F6，左侧有8x8px浅蓝色方块#3B82F6）、“未完成”（文字颜色#1E40AF，左侧有8x8px深蓝色方块#1E40AF），文字大小12px，Inter字体，间距24px，居中显示。 任务列表区域 位置：统计图表区域下方，距离统计图表区域32px，宽度100%（1200px），高度自适应（根据内容，当前显示5条任务，高度约280px），背景色#FFFFFF，边框1px solid #E5E7EB，圆角8px。 标题：“任务列表”，文字颜色#1F2937，字体大小16px，Inter字体，加粗，位于列表容器顶部左侧，距离顶部内边距16px，距离左侧内边距16px。 表格：位于标题下方，距离标题16px，宽度100%，边框-collapse，单元格无内边距。 表头：高度40px，背景色#F3F4F6，包含“任务号”“名称”“成果物”“责任人”“计划完成时间”5列，每列表头文字颜色#4B5563，字体大小14px，Inter字体，居中对齐，各列宽度占比15%、25%、20%、15%、25%，表头底部边框1px solid #E5E7EB。 表体：每行高度48px，边框底部1px solid #E5E7EB，hover时行背景色#F9FAFB。 第1行：任务号“TASK-1001”，名称“任务名称1”，成果物“文档”，责任人“李四”，计划完成时间“2025/8/5”，文字颜色#1F2937，字体大小14px，Inter字体，居中对齐。 第2行：任务号“TASK-1002”，名称“任务名称2”，成果物“报告”，责任人“钱七”，计划完成时间“2025/8/10”，文字颜色#1F2937，字体大小14px，Inter字体，居中对齐。 第3行：任务号“TASK-1003”，名称“任务名称3”，成果物“代码”，责任人“王五”，计划完成时间“2025/8/26”，文字颜色#1F2937，字体大小14px，Inter字体，居中对齐。 第4行：任务号“TASK-1004”，名称“任务名称4”，成果物“设计图”，责任人“李四”，计划完成时间“2025/8/27”，文字颜色#1F2937，字体大小14px，Inter字体，居中对齐。 第5行：任务号“TASK-1005”，名称“任务名称5”，成果物“测试用例”，责任人“张三”，计划完成时间“2025/8/27”，文字颜色#1F2937，字体大小14px，Inter字体，居中对齐。 滚动条：表格右侧有纵向滚动条，宽度6px，背景色#E5E7EB，滑块颜色#9CA3AF，圆角3px，滑块高度根据内容自适应。
最新发布
08-01
但在这个上下文中，可能没有数学表达式，除非涉及布局计算。如果有尺寸计算，需要用$...$。 2. 独立公式使用$$...$$。 3. LaTeX语法正确。 4. 使用中文回答。 5. 生成相关问题。 6. 回答中引用的段落末尾添加...
html判断距离顶部的距离,原生js获取距离页面顶端的距离
weixin_33291624的博客
06-19 1982
不用jquery的情况下，因为用的是vue框架，获取元素到页面顶端的距离demo的代码如下：问题1 offsetTop只能获取到有定位元素父级的距离，怎么获取到页面顶端距离呢问题2 子级有了transform 24px但offsetTop却获取不到 下面打印出来的值是0Documentddddddddddddddp{line-height:29px;font-size:29px}.box{wid...
html 如何调整h3的位置,html – 如何格式化H3标签两侧的按钮
weixin_39684228的博客
06-09 1025
示例：http://jsfiddle.net/s9x2kxyz/有更多的方法可以做到这一点,但上面的小提示显示了一种非常简单的方法：HTML：Title may or may not be long enough to break to new lineCSS：h3, span {display:block;float:left;text-align:center;}h3 {width:80%;m...
二、HTML标签学习
weixin_65002380的博客
08-24 469
<h1>1级标题</h1><h2>2级标题</h2><h3>3级标题</h3><h4>4级标题</h4><h5>5级标题</h5><h6>6级标题</h6><p>我是一段文字</p>标签说明b加粗u下划线i倾斜s删除线标签说明stong加粗ins下划线em倾斜del删除线<img src=" " alt=" "> <audio src="images/music.mp3" controls></audio>属性名功能src视频的路径controls显示播放的控件autoplay自动播放（部分浏览器不
HTML入门基础标签（结构标签，文本标签，特殊字符转义标签，多媒体标签）
学习笔记
08-10 376
src：规定显示图像的 URL（统一资源定位符） height：定义图像的高度 width：定义图像的宽度支持的音频格式：MP3、WAV、OGG src：规定音频的 URL controls：显示播放控件支持的音频格式：MP4, WebM、OGG src：规定视频的 URL controls：显示播放控件。......
CSS基础：基础知识
沉梦昂志
06-05 455
css介绍 css 是层叠样式表，他的作用是用来规定 div 和 div 中内容的位置和样式 html 只负责文档的结构和内容，表现形式完全交给css，html文档变得更加简洁 css 三大特性 层叠性 层叠性是指当一个标签被设置了多个重复的样式的时候，一个属性会覆盖另外一个属性 层叠性主要遵循的原则是：优先级的情况下，就近原则，否则以优先级高的为准 继承性 继承性是指当子标签没有设置样式时，会继承父标签的样式 text-，font-，line-这些元素开头的都可以继承，以及color属性 子标签
HTML标签练习（1）
ThinkPet
03-15 1235
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
标题标签左边留白无法对齐的问题
lu10505的博客
12-30 805
在使用h3标签的过程中遇到了左边有留白文字无法对齐的问题 查阅资料怀疑是h标签使用时，浏览器自动前后给予空行导致的宽度不够 解决方案： 将h3标签的属性display成inline-block，并且在html中使用</br>进行空行 display: inline-block; 也有可能是因为上面的标签高度超出导致（1px的差距） 解决方法： 在上部a标签当中选...
解决外边距重叠问题
zxpyyds的博客
03-30 467
若子元素设置外边距margin-top: 50px; 发现并不是子元素下移50px而是父元素一起下移，这就是外边距问题。 解决办法：在父元素内容区顶部放置一个空内容，使得父子元素隔开。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> ...
网站h1,h2,h3标签的用法和技巧
wh5355的专栏
01-04 7381
网站h1,h2,h3标签的用法和技巧 我们首先要明白h1,h2是什么。在HTML语言中有到定义标题头的六个不同文字大小的TAGES。本质是为了呈现内容结构，共有六种标签，文字从大到小，权重依此反而降低。也就是说H1>H2>H3，依此类推。他在优化中也是起着，呈现内容结构的一个作用，这样分配的好处把网页整个结构由主到次区分开来，搜索引擎抓取网页的时候就会按着这样的顺序进行抓取索引。 h1,h2标
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值