关于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 相关文章推荐
css3制作动态进度条以及附加jQuery百分比数字显示
Dec 13 HTML / CSS
CSS3旋转——彩色扇子兼容firefox浏览器
Jun 04 HTML / CSS
css3 2D图片转动样式可以扩充到Js当中
Apr 29 HTML / CSS
CSS3制作圆角图片和椭圆形图片
Jul 08 HTML / CSS
CSS3实现王者荣耀匹配人员加载页面的方法
Apr 16 HTML / CSS
CSS3实现淘宝留白的方法
Jun 05 HTML / CSS
HTML5中判断横屏竖屏的方法(移动端)
Aug 04 HTML / CSS
SVG实现多彩圆环倒计时效果的示例代码
Nov 21 HTML / CSS
详解h5页面在不同ios设备上的问题总结
Mar 01 HTML / CSS
前端实现背景虚化但内容清晰且自适应 的实例代码
Aug 01 HTML / CSS
基于HTML5+tracking.js实现刷脸支付功能
Apr 16 HTML / CSS
html5 video全屏播放/自动播放的实现示例
Aug 06 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
php设置页面超时时间解决方法
2015/09/22 PHP
php实现的读取CSV文件函数示例
2017/02/07 PHP
FormValid0.5版本发布,带ajax自定义验证例子
2007/08/17 Javascript
jquery如何实现在加载完iframe的内容后再进行操作
2013/09/10 Javascript
推荐一款jQuery插件模板
2015/01/09 Javascript
js实现拉幕效果的广告代码
2015/09/02 Javascript
jquery获取css的color值返回RGB的方法
2015/12/18 Javascript
使用Script元素发送JSONP请求的方法
2016/06/12 Javascript
引用jquery框架后出错的解决方法
2016/08/09 Javascript
用headjs来管理和加载js 提高网站加载速度
2016/11/29 Javascript
bootstrap导航栏、下拉菜单、表单的简单应用实例解析
2017/01/06 Javascript
原生js实现倒计时功能(多种格式调用)
2017/01/12 Javascript
Vue+SpringBoot开发V部落博客管理平台
2017/12/27 Javascript
Bootstrap Table实现定时刷新数据的方法
2018/08/13 Javascript
Ajax请求时无法重定向的问题解决代码详解
2019/06/21 Javascript
解决mui框架中switch开关通过js控制开或者关状态时小圆点不动的问题
2019/09/03 Javascript
解决Antd Table组件表头不对齐的问题
2020/10/27 Javascript
python daemon守护进程实现
2016/08/27 Python
为什么选择python编程语言入门黑客攻防 给你几个理由!
2018/02/02 Python
django中静态文件配置static的方法
2018/05/20 Python
python输出pdf文档的实例
2020/02/13 Python
Django 设置多环境配置文件载入问题
2020/02/25 Python
python文件操作seek()偏移量,读取指正到指定位置操作
2020/07/05 Python
Python类型转换的魔术方法详解
2020/12/23 Python
CSS3实现多重边框的方法总结
2016/05/31 HTML / CSS
西班牙灯具网上商店:Lampara.es
2018/06/05 全球购物
大学同学聚会邀请函
2014/01/19 职场文书
早会主持词
2014/03/17 职场文书
客户经理竞聘演讲稿
2014/05/15 职场文书
竞选学习委员演讲稿
2014/09/01 职场文书
2014大学生中国梦主题教育学习思想汇报
2014/09/10 职场文书
党的群众路线教育实践活动个人对照检查材料范文
2014/09/25 职场文书
学校党委副书记个人对照检查材料思想汇报
2014/09/28 职场文书
高中生毕业评语
2014/12/30 职场文书
我是特种兵观后感
2015/06/11 职场文书
Python中的协程(Coroutine)操作模块(greenlet、gevent)
2022/05/30 Python