CSS中margin不会撑开盒子
之前在上网查margin对盒子大小影响的时候发现全部都是关于“父子盒子同时定义margin-top|bottom,那么父盒子上边会塌陷至与子盒子上边重合”这样的问题,对于其他情况margin对盒子的影响没有涉猎,在此进行测试。
那么在一个盒子内放置两个盒子
<div id="father"><div id="son1"></div><div id="son2"></div></div>
#father
{/* border: 0px dotted blue; */overflow: hidden;margin-top: 20px;height: 200px;width: 150px;background-color: red;
}
#son1
{margin-top: 20px;height: 100px;width: 100px;background-color: black;
}
#son2
{margin-top: 10px;height: 100px;width: 100px;background-color: green;
}
#father
{/* border: 0px dotted blue; */overflow: hidden;margin-top: 20px;height: 200px;width: 150px;background-color: red;
}
#son1
{margin-top: 100px;height: 100px;width: 100px;background-color: black;
}
#son2
{margin-top: 10px;height: 100px;width: 100px;background-color: green;
}
因此,margin不会像padding一样撑开盒子,可用于大盒子内部子盒子间的分离而不用考虑对大盒子尺寸的影响
CSS中margin不会撑开盒子相关推荐
- html5中margin是什么意思,css中margin是什么意思,margin作用是什么?
一.介绍,什么意思? margin为对象外边距间隔属性.如果对一个对象比如div设置了边框后,再设置margin就会观察到这个div外面产生了间距边距. margin作用: 设置对象与其它对象的外边距 ...
- C语言margin的作用是,css中margin是什么意思,margin作用是什么
一.简介,甚么含义? margin为对象外边距间隔属性.假如对一个对象比方div配置了边框后,再设置margin就会察看到这个div外面孕育发生了间距边距. margin感导: 设置对象与此外对象的外 ...
- html css中margin的用法
css中margin的用法 1.使用auto实现在浏览器水平自动居中 2.margin实现贴边 3.使用margin垂直外边距的合并 示例: 4.margin-top的塌陷问题 1.外部盒子设置一个边 ...
- CSS中margin和padding的区别
padding.margin都是边距的含义,关键问题得明白是什么相对什么的边距.padding是控件的内容相对控件的边缘的边距,margin是控件边缘相对父空间的边距. 在CSS中margin是指从自 ...
- html怎么设置左偏移量,CSS中margin属性的偏移量详解(代码示例)
本篇文章给大家介绍一下CSS中margin属性的偏移量,有感兴趣的朋友可以看一看. 话不多说,我们直接进入正题~ 我们先来看一个具体的例子(相关推荐:CSS学习手册) 代码入下:HTML文件和CSS文 ...
- html设置margin无效,CSS中margin不起作用的原因及解决方法
margin是一个属性,指定元素和元素之间的间距,但不能为内联元素指定边距,本篇文章将给大家介绍关于CSS中margin不起作用的原因及解决方法. margin不起作用的原因 对于初学者来说,可能会经 ...
- HTML5中margin属性应用,CSS中margin属性及其使用探究
本文向大家描述一下CSS中margin属性的用法,主要包括其属性,使用过程中会遇到的问题,以及一些高级应用等内容,相信本文介绍一定会让你有所收获. CSS中margin问题及使用 margin属性为C ...
- css margin属性 auto,css中margin:auto属性的使用方法
css中margin:auto属性的使用方法 发布时间:2020-06-25 10:53:17 来源:亿速云 阅读:221 作者:Leah 今天就跟大家聊聊有关css中margin:auto属性的使用 ...
- 在html中设置margin属性,css中margin的4个属性
CSS中:margin:auto与margin: 0 auto;有什么区别 CSS中:margin:auto与margin: 0 auto;有什么区别.有的网站中写的是前者意思不同.margin:au ...
最新文章
- 如何开启Windows 10隐藏的锁屏时间设置项
- 利用you-get批量下载bilibili等网站的视频
- 5分钟了解Mockito
- 用delphi 做服务器,basic4android 实现三层数据交互
- 正则表达式实战---爬取多张图片
- cad2017怎么改变选择方式_家用胎心仪怎么使用?建议孕妈妈选择数胎动的方式...
- linwei_211 SVN错误:Attempted to lock an already-locked dir
- android studio 弹出式对话框设置时间_如何设置当单击某个对象时运行指定的应用程序?...
- WSSv3 Technical Articles_使用Visual Studio 2005扩展创建Windows SharePoint Services 3.0 Web Part...
- linux系统 设置网卡ping通主机连上外网
- PAT (Basic Level) Practice1019 数字黑洞
- 在windows10上写自己的第一个python代码
- 快来领取哔哩哔哩412张超清壁纸!
- 移动聚合支付招商,管道收入享长期分润
- 电气专业c语言要学得非常好吗,电气自动化专业需要学C语言吗?
- 【ACWing】909. 下棋游戏
- Cozmo人工智能机器人SDK使用笔记(1)-基础部分basics
- 强行删除文件的方法(是因权限不够,并非解除占用)
- 苹果 python 返回32512_(FOCUS)有容量限制的 VRP 模型的分支切割法的实现 by python3 Gurobi...
- 按 特定区域/指定位置 批量裁剪图片