HTML.CSS 父标签无垂直外边距而子标签有垂直外边距引发的问题

最新推荐文章于 2022-08-26 16:16:27 发布
最新推荐文章于 2022-08-26 16:16:27 发布
阅读量284 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35405636/article/details/84348248
版权

今天在写网页时无意中发现两个div嵌套时父标签没有写垂直外边距而子标签写了垂直外边距会发生问题,上网查了很多博客都没有详细的解答,只能自己研究了,最终得出结果,先上代码.

上效果

父标签如果没有垂直外边距父标签的top会取子标签中垂直外边距的最大值,最大值会赋值给父标签的margin-top,父标签的margin-top是相对于body的,所以父标签的top聚力body的top200px,这种情况下正常来说子标签的margin-top和margin-bottom是应该相对于父标签的top和bottom的,但实际上却都是相对于父标签的top,子标签的margin-top:200px是子标签的top相对于父标签的top的聚力,子标签的margin-bottom:100px也是子标签的bottom相对于父标签的top的距离.

 

 

再上一组代码:

 

如果子标签中有垂直外边距父标签中也有垂直外边距父标签的top依然会取子标签中垂直外边距的最大值,但父标签中的垂直外边距依然使用自己的.

qq_35405636
关注
css一起控制多个标签,纯css实现多标签浮动居中（任意个数）
weixin_35316354的博客
08-04 1327
在做的一个网页上有一块要用浮动标签，具体就是网页底部有未知数量，未知尺寸的元素要水平居中，有点类似于分页器。首先，我们先新建一个容器con，就是标签的爸爸，用来控制标签在页面的位置，.father{position:absolute;width:100%;height:30px;bottom:0;}接下来分析子元素的属性，因为元素的尺寸是未知的(主要是宽度)，所以不能给固定宽度，标签的个数也是未知...
HTML框架标签
Yang_Rujie的博客
11-02 4975
HTML常用标签 一、表格标签 table常用属性 tr常用属性 td常用属性 表格实例 二、表单标签 表单标签 表单域 表单按钮 表单实例 三、框架标签 框架结构文件格式 框架结构基本标签 target属性 框架实例 一、表格标签 table常用属性 （1）border：设置表格边框的宽度，值为非负整数，若为0表示边框不可见，单位为像素。 （2）cellspacing：设置单元格边框到表格边框的距离，单位为像素。 （3）cellpadding：设置单元格内文字到单元格边框的距离，单位为像素
css-父标签中的子标签默认位置
anjue8318的博客
11-17 205
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> .a{ width: 100px; height: 100px; background: red; position: ...
html 图片垂直边距,HTML，CSS和垂直文本边距
weixin_42548888的博客
06-04 599
这可能是基本的东西，所以如果有某种HTML文本&边距工作的在线参考，请给我一个链接。HTML，CSS和垂直文本边距无论如何，我在定义文本的确切边距时遇到了一些麻烦。下面是一个图像的例子，一个包含它下面的文本的div和div下的更多文本。其他边距设置为0，div的边距为10px top & bottom，0 left & right。由于我未知的原因，结果是16px顶部，14...
HTML中外边距合并问题？
jhj124的博客
05-14 185
盒子外边距合并有两种：父子外边距合并，兄弟外边距合并。 解决办法： 父子外边距合并，父子级之间的外边距 是针对于第一儿子： 1.给父级加上border ​ 2.给父级加上padding ​ 3.父级overflow:hidden;超出隐藏 兄弟外边距合并中，没有特殊解决方法，主要是： 1.谁大谁做主，取最大值 2，设置好其中一个值就好 ...
html之垂直外边距问题
a695005548的博客
04-07 844
html之垂直外边距 一、兄弟元素的垂直相邻 首先写俩个div ，分别设置宽高均为100px，此时俩个div在垂直方向相邻。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <style type="text/css"> body{ margin: 0 auto; } .div
html 图片垂直边距,html – 文本节点后第一个块的边距(垂直空间)？
weixin_31602525的博客
06-04 207
我不确定你是否会认为这是对你的问题的完整答案,因为我知道你正在使用< td>在您的示例中,< td>之间存在一个差异.和< dd>或者< li>元素是< td>的事实.在不破坏< table>的情况下,元素不能与其周围元素相抵消具体行为.但至少我可以回答你的第三个问题的一部分：If it’s true that it’s no...
自己学习html+css的详细笔记
qq_53366282的博客
05-18 1811
目录 常用符号： 6 有序列表：ol>li 6 无序列表：ul>li 7 自定义列表：dl>dt+dd 7 图片标签： 7 表格： 8 表单from： 8 CSS： 9 CSS优先级： 9 CSS选择器 10 伪类选择器： 10 CSS文本属性 11 1. 字体大小 11 2. 颜色 11 3. 加粗&倾斜 11 4. 水平垂直居中 12 5. 文本间距 12 6. 首行缩进 12 7. 文本修饰 12 8. Transform大小写 13
CSS层叠样式表Cascading Style Sheets(2021.10.05)
SHY
12-19 1306
一、CSS简介 1.优缺点 优点：丰富的样式描述； 样式和结构的分离，便于维护和管理； 减少代码量，加快页面加载； 样式代码复用性强； 多个页面可以使用同一个CSS代码； 缺点：浏览器对CSS支持程度不同。 2.CSS特性 (1)继承性 1）后代元素继承祖先元素的样式(嵌套关系)； 2）只能继承文字、文本样式(如，color、text-开头、font-开头、line-开头)，其他样式不能继承。 (...
html+css+js基础问答
qq_43751465的博客
08-26 5242
css3 1.标签语义化 顾名思义，合理的标签干合适的事情 块级（display：block）：div 、p、h1~h6、hr、ul、ol、li、dl、dd、form、table、header、footer、main、nav、sector、arcitcle、pre、table、tbody、thead、th、tr、tfoot 行级（display：inline）：a、span、small、strong、em、i、code、 行内块（display：inline-block）：img、input 区别： 1.
【HTML+CSS】用clearfix解决父子元素的垂直外边距重叠和父元素高度塌陷
qq_40179700的博客
03-15 425
当你在 &amp;lt; div &amp;gt; 标签中再建一个&amp;lt; div &amp;gt;标签，使其一个包含另一个（即父元素和子元素）时，让子元素浮动或者设置外边距时，你设想的结果如下图。 错误示范： &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset
html垂直外边距,深入CSS之外边距折叠(margin collapse)详解
weixin_35795512的博客
06-04 449
什么是外作一新求抖直微圈边距折叠准确来览始不次这得是觉砖怎可我滚脑选的方近器上说，外边距折叠应该叫垂直外边距折叠，因为只会发生在垂直方向上，而水平方向上要圈器是天的年编功小还久概据含直这请框结业未商屏页屏随会维气大机域页效实一应控高标近用功的不会发生。对于以器打好基下是求的响的可域适的一的近重交的下简单的html代码和css代码， 请问top块和bottom块之间的垂直间距到二新，为都础过过发等宗...
html水平和垂直边距,css权威指南-基本视觉格式化（水平与垂直）_html/css_WEB-ITnose...
weixin_39982580的博客
06-21 698
1.基本概念(1)正常流：是指西方语言文本从左向右，从上向下显示。如果要让一个元素不在正常流中国，唯一的办法就是使之成为浮动或定位元素。(2)非替换元素：如果元素的内容包含在文档中，则称之为非替换元素。(3)替换元素：指用作为其他内容占位符的一个元素。例子：img中的图像(4)块级元素：在正常流中，会在其框之前和之后生成“换行”所以出于正常流中的块级元素会垂直摆放。(5)行内元素：不会再之前或之后...
html5中margin属性垂直外边距合并案例
大数据-攻城狮
02-21 337
&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;    
解决父子外边距塌陷（子元素margin-top不生效）的三种方法
qq_48109675的博客
08-26 658
第一种：父元素设置padding 第二种：父级设置边框 第三种：父元素设置overflow: hidden;
css中遇到外边距合并问题了吗？解决一下！（父子级）
mysweetss的博客
08-26 437
CSS中标签元素外边距合并问题（父子级） 在CSS设计中，常常遇到块级元素的外边距合并问题的出现，例如外层div嵌套内层div，为内部div设置上边距时，想要产生和外层div有一定的距离，从而达到页面的设计效果，但是由于外边距合并的产生，外层div会因为内层div设置上边距，会随着内层div产生一个共同的外边距，并没有达到理想的效果。这就是父子级元素外边距合并问题现象。（即父元素会随着子元素一起拥有外边距） 1.正常内外层div设定代码以及运行图： <head> <meta charse
html两个块元素的垂直间距,相邻块元素垂直合并是怎样实现的？
weixin_34792641的博客
06-22 1100
当上下相邻的两个块元素相遇时，如果上面的标签有下外边距margin-bottom，下面的标签有上外边距margin-top，则它们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并(也称外边距塌陷)。示例代码如下：.one{width:150px;height:150px;background:#FC0;margin...
html5中图像水平边距,图像的垂直边距和水平边距属性
weixin_35663151的博客
06-30 6871
1.图像的垂直边距vspace垂直边距vspace用来调整图像与文字的垂直边距。语法：说明：在该语法中，vspace属性的单位是像素。举例：图像的垂直边距市机关幼儿园是一所省示范性幼儿园、市一级幼儿园。先后被评为浙江省科研兴校200强学校、首批“园本教研示范幼儿园”、市教育科学研究基地学校、市现代化幼儿园、市先进“结对园”、市中小学幼儿园'教师教育先进集体、市卫生先进单位、市绿化先进单位。幼儿...
HTML块元素与垂直外边距合并：盒子模型深入解析
1. 相邻块元素的合并：当两个块级元素上下相邻，且各自具有外边距时，如果上方元素有下外边距，下方元素有上外边距，浏览器会选择较大的外边距值，这就是所谓的垂直外边距合并。这可能导致布局的意外结果，因此...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值