关于css中margin的值和垂直外边距重叠问题


Posted in HTML / CSS onOctober 27, 2020

并列盒子的margin(双margin的重叠)面试题:一个盒子有上边距,另一个盒子有下边距,会出现margin边距的重叠问题?解决:取大值,并不是他们的相加之和,而是谁大听谁的!

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style type="text/css">
    *{margin: 0;padding: 0;}
    .box1,.box2{
    width: 200px;
    height: 200px;    
    }
    .box1{
    background-color: #f90;
    margin-bottom: 20px;
    }
    .box2{
    background-color: aqua;
    margin-top: 50px;
    }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

关于css中margin的值和垂直外边距重叠问题

margin跟padding内边距的方位值和取值情况一样,顺时针方向(上右下左),点击查看"css盒子模型之内边距padding及简写"

到此这篇关于关于css中margin的值和垂直外边距重叠问题的文章就介绍到这了,更多相关margin垂直外边距重叠内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
使用Filters滤镜弥补CSS3的跨浏览器问题以及兼容低版本IE
Jan 23 HTML / CSS
CSS3中使用RGBA设置透明度的示例
Aug 04 HTML / CSS
Css3新特性应用之视觉效果实例
Dec 12 HTML / CSS
纯CSS3实现扇形动画菜单(简化版)实例源码
Jan 17 HTML / CSS
CSS3实现可翻转的hover效果
May 23 HTML / CSS
CSS3田字格列表的样式编写方法
Nov 22 HTML / CSS
HTML5 和小程序实现拍照图片旋转、压缩和上传功能
Oct 08 HTML / CSS
HTML5的结构和语义(3):语义性的块级元素
Oct 17 HTML / CSS
html5 canvas实现给图片添加平铺水印
Aug 20 HTML / CSS
Canvas 文本填充线性渐变的使用详解
Jun 22 HTML / CSS
AmazeUI 按钮交互的实现示例
Aug 24 HTML / CSS
CSS 一行代码实现头像与国旗的融合
Oct 24 HTML / CSS
CSS3 实现弹跳的小球动画
Oct 26 #HTML / CSS
css3利用transform变形结合事件完成扇形导航
Oct 26 #HTML / CSS
CSS 3.0文字悬停跳动特效代码
Oct 26 #HTML / CSS
css3 transform过渡抖动问题解决
Oct 23 #HTML / CSS
CSS3 对过渡(transition)进行调速以及延时
Oct 21 #HTML / CSS
css3 利用transform打造走动的2D时钟
Oct 20 #HTML / CSS
详解CSS3中常用的样式【基本文本和字体样式】
Oct 20 #HTML / CSS
You might like
打造计数器DIY三步曲(中)
2006/10/09 PHP
Yii2语言国际化自动配置详解
2018/08/22 PHP
IE 下的只读 innerHTML
2009/08/21 Javascript
JavaScript DOM学习第八章 表单错误提示
2010/02/19 Javascript
javascript之querySelector和querySelectorAll使用说明
2011/10/09 Javascript
jquery $.getJSON()跨域请求
2011/12/21 Javascript
JScript分割字符串示例代码
2013/09/04 Javascript
得到form下的所有的input的js代码
2013/11/07 Javascript
js计算两个时间之间天数差的实例代码
2013/11/19 Javascript
基于jquery实现省市联动效果
2015/11/23 Javascript
基于JS代码实现图片在页面中旋转效果
2016/06/16 Javascript
利用select实现年月日三级联动的日期选择效果【推荐】
2016/12/13 Javascript
jQuery插件autocomplete使用详解
2017/02/04 Javascript
微信小程序模板和模块化用法实例分析
2017/11/28 Javascript
Vue2 轮播图slide组件实例代码
2018/05/31 Javascript
详解Vue实战指南之依赖注入(provide/inject)
2018/11/13 Javascript
详解Js里的for…in和for…of的用法
2019/03/28 Javascript
运用js实现图层拖拽的功能
2019/05/24 Javascript
vue实现登录页面的验证码以及验证过程解析(面向新手)
2019/08/02 Javascript
vue 路由meta 设置导航隐藏与显示功能的示例代码
2020/09/04 Javascript
JavaScript如何操作css
2020/10/24 Javascript
Python实现合并字典的方法
2015/07/07 Python
python爬虫使用cookie登录详解
2017/12/27 Python
pandas.dataframe中根据条件获取元素所在的位置方法(索引)
2018/06/07 Python
python 获取毫秒数,计算调用时长的方法
2019/02/20 Python
简单介绍django提供的加密算法
2019/12/18 Python
tensorflow多维张量计算实例
2020/02/11 Python
Python使用os.listdir和os.walk获取文件路径
2020/05/21 Python
python3中布局背景颜色代码分析
2020/12/01 Python
奥地利顶级内衣丝袜品牌英国站:Wolford英国
2016/08/29 全球购物
校园报刊亭的创业计划书
2014/01/02 职场文书
2015年工程部工作总结
2015/04/30 职场文书
幼儿园门卫安全责任书
2015/05/08 职场文书
海洋天堂观后感
2015/06/05 职场文书
《棉鞋里的阳光》教学反思
2016/02/20 职场文书
创业计划书之韩国烧烤店
2019/09/19 职场文书