css中块级标签设置margin-top属性作用于父容器

最新推荐文章于 2022-07-13 15:22:43 发布
最新推荐文章于 2022-07-13 15:22:43 发布
阅读量638 收藏
点赞数
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/TabLayout/article/details/79640074
版权
    这段时间在学习前端技术,在学习css的时候,遇到了很奇怪的问题,在子块级标签里面设置margin-top属性,但是显示的效果却并不是子块级标签向下移动,而是整个父容器相对于整个浏览器向下移动了.呀呀呀~我尝试了在其他浏览器上运行,效果还会一样,很奇怪,我又尝试在父块级标签设置padding-top属性,可以正常显示了,但是我还是不太清楚为什么设置margin-top会有问题,各位看官能否为我解释一下哈~
蓝莓曲奇饼
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
C语言margin的作用是,css中margin是什么意思，margin作用是什么
weixin_33614878的博客
05-16 1352
一、简介，甚么含义？margin为对象外边距间隔属性。假如对一个对象比方div配置了边框后，再设置margin就会察看到这个div外面孕育发生了间距边距。margin感导：设置对象与此外对象的外边距离，外边隔绝距离。比喻对象与对象，凹凸DIV，摆布DIV隔断几多，大要使用margin完成。.css5{margin:10px}设置html中class=css5对象的外边距(包括上、左、下、右)分别为...
CSS子元素设置margin-top作用于父容器？
weixin_34061042的博客
07-07 145
CSS子元素设置margin-top作用于父容器？ 原因： In this specification, the expressioncollapsing marginsmeans that adjoining margins (no non-empty content, padding or border areas or clearance separate them) of two ...
margin标签
qq_20037049的博客
09-11 804
margin是盒模型几个属性中一个非常特殊的属性：只有margin不显示当前元素背景；只有margin可以设置为负值；margin和宽高支持auto;margin具有非常奇怪的重叠特性。
设置margin-top影响到父容器 / 子DIV设置margin-top影响父DIV位置
lingdian1614114082的博客
01-16 921
父级并没有完全保住子集，父级没有包含子集的margin-top部分， 原因：CSS2.1的盒模型中规定： In this specification, the expression collapsing margins means that adjoining margins (no non-empty content, padding or border areas or clearance s...
html5中margin是什么意思,html中topmargin属性
weixin_39875167的博客
06-22 1695
html标签中的leftmargin是什么属性？而topma左边距。js获取css属性，更改margin-top属性，给每个a标签 为负数就是向反方向移动。 比如 这两个div中间应该空5px，因为左边的div在右边留有5px的边距。 如果改成 意思就是这两个div不仅中间没空，而且还有3px的部分是重叠在一起的。 自己写几个div试验下就知道了。span标签设置margin-top没有效果呢？是...
CSS布局奇淫技巧之--各种居中总结
09-24
设置单行文本的`line-height`等于其父容器的高度，可实现垂直居中。这种方法仅适用于单行文本。 4. **表格的居中** 表格中的`td`和`th`元素可以使用`align="center"`和`valign="middle"`实现内容的水平和垂直...
css设置屏幕宽度变化时的过渡前端css面试20道常见考题.docx
07-08
可以通过设置`margin: 0 auto`使有固定宽度的块级元素在父容器中水平居中。 7. **水平垂直居中**： 对于相对定位或绝对定位的元素，可以通过设置`top: 50%`, `left: 50%`，然后用负外边距`margin-top: -height/2`...
CSS隐藏文字的6种方法
09-25
`，通过设置`margin-top:-9999px;`和`margin-left:-9999px;`将元素绝对定位到屏幕之外。虽然文本不可见，但它仍然占用页面的空间，这可能不符合隐藏文本的初衷。 最后，文章提到后三种方法（`display:none;`、`...
css入门笔记
05-15
独立于任何网页位置处，声明一个样式文件(.css为后缀)，在文件中声明样式，在使用的网页中引入.css文件。 使用步骤： 1.创建样式表文件（.css） 2.在样式文件中编写样式规则 3.在网页中对样式文件进行引入 &lt...
1子级div margin属性影响父级div margin属性
365Marathon
02-17 976
先来看看如下代码： 为什么子footer_top的margin-top属性错误呢? #footer{width:1314px;height:432px;background-color:#666666;} #footer_top{width:1200px;height:328px;margin-top:24px;margin-left:32px;background-color:#06
关于内层标签margin-top无效的问题
HIDPROVIDER的博客
07-02 744
最近在页面布局的时候遇到了这么一个问题： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> header{ width: 940px; height: 80px; background-color: #000;
CSS 关于margin你应该要知道的
qq_43293207的博客
04-04 2427
1.margin与元素尺寸 我们知道，在W3C盒模型下（即box-sizing:content-box）给一个元素设置padding内边距的时候，会改变元素原有的实际尺寸（即使你设置该元素的width属性）。而margin属性虽然其本意为外边距，让人以为只会影响其与其他元素间的距离。实际上，当元素处于“充分利用可用空间”的状态时，margin属性会影响其实际尺寸 示例： <div class="container"> <div class="child"></div&g
css之子容器宽度100%，设置margin后超出父容器
铁锤妹妹的博客
01-06 2811
2022年开年第一篇，很庆幸一直能学到新的东西，生命不息奋斗不止！ 回顾这一年，从刚开始的学习定义变量到现在可以独立完成一个模块的功能，技术上确实长进不少，也深深地感受到你知道的越多，你不知道的越多； 希望在新的一年里技术更上一个台阶，工资越来越多，嘻嘻(#.#) 话不多说，开干吧~ 一. 问题 我们发现，需要设置一定边距时，如果子容器设置宽度为100%，然后设置了margin，会超出父容器的宽度溢出。 .renderList { width: 100%; background: #f
css margin传递（塌陷现象）
http____的博客
07-13 150
互相嵌套的块级元素，子元素的margin-top会作用在父元素上，导致父元素一起向下移动。 只有margin-top会有传递的问题，其他三个方向是没有传递问题的。 给父元素设置border-top或者padding-top（分隔父子元素的margin-top）给父元素设置padding-top来达到相同的效果 给父元素设置overflow:hidden（推荐使用，触发BFC）将其中一个元素转换成行内块元素给其中一个元素设置浮动：当父容器或子容器处于浮动时，就不存在margin传递问题了，因为已经脱离了文档流
行内元素和与行内块元素的margin-top问题
KKRK_的博客
12-09 1632
行内元素和与行内块元素的margin-top问题 内联(行级)元素 不能设置宽高，但padding属性可以设置，需要注意的是行级元素不能设置margin-top和margin-bottom属性，但可以设置margin-left和margin-right属性。如果需要设置行级元素的margin-top或margin-bottom属性，必须将行级元素转换成内联块级元素或块级元素。 源代码： 给行内元素加padding属性，是可以设置的,也可以设置margin-left属性。 <style>
css 子级元素设置margin-top父级元素会跟着移动问题解决
weixin_67375532的博客
06-19 2902
关于嵌套盒子时css 子级元素设置margin-top父级元素会跟着移动的问题原因以及解决办法
代码设置margintop_CSS设置margin-top失效及解决办法
weixin_39915204的博客
12-21 241
在web网站开发中，有时候我们给html元素设置的margin-top或margin-bottom属性，但是无效，并没有取到任何作用,这是什么原因呢?常出现两种情况：1、兄弟元素之间margin-top失效先看下面代码： float: left clear:both; margin-top:20px; 两个层box1和box2，box1具有浮动属性，box2没有，这时候设置box2的上边...
css中给子元素添加margin-top影响到父元素
最新发布
09-01
在CSS中，给子元素添加margin-top会直接影响到父元素。 当给子元素添加margin-top时，子元素会相对于它的父元素进行定位。如果子元素的margin-top值为正数，那么子元素就会向上移动，同时父元素的高度也会增加，...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值