子元素magrin-top影响父元素的magrin-top

最新推荐文章于 2022-11-22 09:44:00 发布
最新推荐文章于 2022-11-22 09:44:00 发布
阅读量225 收藏
点赞数
分类专栏： css 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_37938136/article/details/105947211
版权
原因：
父元素没有设置宽高，容易受到子元素的影响
解决方案：
1.尽量给父元素设置padding，也不要给子元素设置margin      
2.给父元素设置宽高（放大缩小时容易变形）
伍拾叁
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS 同级元素position:fixed和margin-top共同使用的问题
09-22
在测试中，人们发现，如果将content的margin-top改为padding-top，那么可以实现预期的效果，即固定头部元素不受其他同级元素影响。这是因为padding不会引起外部的margin塌陷问题。同样地，如果为body元素设置padding...
div标签中的元素margin-top失效的解决方法
09-28
由于padding和border会影响父元素的实际尺寸，它们可以为子元素的外边距提供足够的空间来发挥效果。但这可能会改变元素的视觉效果，特别是当你不希望改变其内边距或边框样式时。 另一个解决方案是使用绝对定位。...
子div块中设置margin-top时影响父div块位置的解决办法及其原因
04-04 110
解决办法①: 若子DIV块中使用margin-top,则在父DIV块中添加：overflow:hidden; 解决办法②: 在子DIV块中用padding-top代替margin-top。 有个叫 bfc 的东西 叫 块级元素格式化上下文 overflow hidden 或者描边可以触发 bfc 就可以解决这个问题 转载于:https://www.cnblogs....
margin：子元素添加margin-top影响父元素；上下盒子添加外边距重叠问题
美人如玉，剑气如虹
09-03 6670
这几天看margin看的有点晕，写篇博客细细梳理一下 margin 的一些问题。主要是两个方面的，1. 子元素添加 margin-top 父元素也会下移；2.当兄弟关系的两个盒子同时添加外边距时，相邻的外边距会重叠。 1.子元素添加 margin-top ，父元素也会受影响，也像添加了 margin-top一样下移。 ...
css中给子元素添加margin-top影响到父元素
最新发布
ｊａｖａ实现一个简单的计算器的加减乘除功能
11-22 1967
css给子元素添加margin-top会影响到父元素
04.17
Gananldo04的博客
04-19 168
一.css元素浮动 元素水平浮动 子元素在默认情况会自动撑开父元素 元素水平浮动 left right 元素在浮动之后会脱离文档流 就不占位置 子元素浮动，父元素撑不开 怎么处理 1.给父元素设置固定高 2.给父元素设置 超出部分隐藏 overflow: hidden; 3.在父元素内部设置一个空的div <div style=" clear: left;">&...
重新认识margin-top和margin-bottom
gaohuanjie的专栏
11-18 1万+
重新认识margin-top和margin-bottom
解决CSS中子元素z-index与父元素兄弟节点的层级问题
01-19
1.问题的出现 写了一个平铺的列表，其中有些列表项具有hover出现的弹出框。希望达成的目标是弹出框展现时，要把列表项内容遮盖住，以保证弹出框...元素的结构大致如下： 列表项1 弹出框1 列表项2 </div>
父元素与子元素之间的margin-top问题(css hack)
01-19
hack： 父元素的盒子包含一个子元素盒子，给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值，而子元素和父元素的边距则没有发生变化。 html代码： 复制代码代码如下: ”box1″> ”box2″>...
matlab magrin函数,margin函数详细功能
weixin_42601608的博客
03-17 2698
(value,0); case 'left': case 'top': case 'marginLeft': case 'marginTop': case 'marginRight': case 'marginBottom': case 'fontsize': _this_ELe......Kernel?下?margin?数值大小里求一个最大的,而是在固定了 Kernel?之后去确定?margin...
CSS中的四种定位以及top和margin-top的区别
稀饭
09-01 2万+
CSS中一共有四种定位分别是默认，相对，绝对，固定 1，position：static，这种定位是默认的，一般没什么实际的作用。 2，position：relative,相对定位 ，不会脱离文档流，类似于static，按顺序排列，一般设置也不会有什么变化，可以通过margin-top/right/bottom/left来改变框的位置 3，position：absolute，绝对定位，这种定位脱离文...
margin-top的问题。
牛爷爷的博客
10-12 1824
一个div内嵌套一个div，如果给内部div设置margin-top，理论上，外部div位置不变，内部div相对向下移动。（但有个前提是，外部的div未设置border和padding）未设置margin-top的情况：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>margin-top的问题</title>
css中的四种定位以及top和margin-top的区别
热门推荐
lxiang222的博客
04-21 3万+
css中一共有四种定位分别是默认，相对，绝对，固定 position：static，这种定位是默认的，一般没什么实际的作用。 position：relative,相对定位 ，不会脱离文档流，类似于static，按顺序排列，一般设置也不会有什么变化，可以通过margin-top/right/bottom/left来改变框的位置 position：absolute，绝对定位，这种定位脱离文档流，可以理解
支持向量机: Maximum Margin Classifier
u012772662的博客
03-15 1452
本文是“支持向量机系列”的第一篇，参见本系列的其他文章。原文链接在此。 支持向量机即 Support Vector Machine，简称 SVM 。我最开始听说这头机器的名号的时候，一种神秘感就油然而生，似乎把 Support 这么一个具体的动作和 Vector 这么一个抽象的概念拼到一起，然后再做成一个 Machine ，一听就很玄了！ 不过后来我才知道，原来 SVM 它并不是一
常见margin-top失效的情况
三月半和蒲公英的博客
07-16 1万+
关于margin-top失效, 常出现两种情况： （一）兄弟元素之间margin-top失效 先看下面代码： &lt;div&gt;        &lt;div  class="box1"&gt; float: left &lt;/div&gt;        &lt;div  class="box2"&gt; clear:both; margin-top:20px; &lt;/div
解决margin-top塌陷的6种方法
irouduoduo的博客
06-09 1万+
demo:一个父盒子嵌套一个子盒子，子盒子margin-top带来的塌陷问题。      6种方法:   1.给父盒子添加border     2.给父盒子添加padding-top     3.给父盒子添加overflow:hidden     4.父盒子:position:fixed     5.父盒子:display:table     6.给子元素的前面添加一个兄弟元素  
某些浏览器body 自带8px magrin
qjx3936888的博客
11-20 1068
深入理解浮动元素与margin负值用法及三栏布局
刘运召的博客
01-14 3682
浮动元素与margin负值使用 正常两个浮动元素 首先给元素设置浮动以后，元素就会变成块级元素 <div class="content"> <div class="middle">123456789123456789123456789123456789</div> <div class="left">111</div...
HTML完整格式–什么是HTML完整格式？
culing2941的博客
09-15 826
HTML full form is Hyper Text Markup Language. HTML is used to describe structure of web pages. HTML完整格式是超文本标记语言 。 HTML用于描述网页的结构。 HTML was developed by Tim Berners-Lee in the late 1991. It was releas...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值