关于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 网页下拉菜单代码解释 中文翻译
Feb 27 HTML / CSS
css3发光搜索表单分享
Apr 11 HTML / CSS
CSS3媒体查询Media Queries基础学习教程
Feb 29 HTML / CSS
CSS3 transforms应用于背景图像的解决方法
Apr 16 HTML / CSS
html5 Canvas画图教程(2)—画直线与设置线条的样式如颜色/端点/交汇点
Jan 09 HTML / CSS
使用HTML5拍照示例代码
Aug 06 HTML / CSS
HTML5拖拽的简单实例
May 30 HTML / CSS
详解使用HTML5 Canvas创建动态粒子网格动画
Dec 14 HTML / CSS
HTML5 Canvas实现360度全景图的示例代码
Jan 29 HTML / CSS
Canvas实现保存图片到本地的示例代码
Jun 28 HTML / CSS
HTML里显示pdf、word、xls、ppt的方法示例
Apr 14 HTML / CSS
CSS SandBox应用场景及常见问题
Jun 25 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
建立动态的WML站点(一)
2006/10/09 PHP
PHP下判断网址是否有效的代码
2011/10/08 PHP
分享ThinkPHP3.2中关联查询解决思路
2015/09/20 PHP
优化WordPress的Google字体以加速国内服务器上的运行
2015/11/24 PHP
php数组遍历类与用法示例
2019/05/24 PHP
JavaScript.Encode手动解码技巧
2010/07/14 Javascript
表单JS弹出填写提示效果代码
2011/04/16 Javascript
深入理解JavaScript系列(9) 根本没有“JSON对象”这回事!
2012/01/15 Javascript
Extjs 3.3切换tab隐藏相应工具栏出现空白解决
2013/04/02 Javascript
原生Js页面滚动延迟加载图片实现原理及过程
2013/06/24 Javascript
JS连接SQL数据库与ACCESS数据库的方法实例
2013/11/21 Javascript
Nodejs Post请求报socket hang up错误的解决办法
2014/09/25 NodeJs
jquery加载图片时以淡入方式显示的方法
2015/01/14 Javascript
javascript字符串替换函数如何一次性全部替换掉
2015/10/30 Javascript
妙用Bootstrap的 popover插件实现校验表单提示功能
2016/08/29 Javascript
jQuery选择器之子元素选择器详解
2017/09/18 jQuery
Vue源码学习之关于对Array的数据侦听实现
2019/04/23 Javascript
vue实现购物车小案例
2019/09/27 Javascript
Nodejs使用archiver-zip-encrypted库加密压缩文件时报错(解决方案)
2019/11/18 NodeJs
python选择排序算法的实现代码
2013/11/21 Python
Python实现单词拼写检查
2015/04/25 Python
简单介绍Python下自己编写web框架的一些要点
2015/04/29 Python
python基于Tkinter库实现简单文本编辑器实例
2015/05/05 Python
python模块smtplib实现纯文本邮件发送功能
2018/05/22 Python
MxNet预训练模型到Pytorch模型的转换方式
2020/05/25 Python
Python-for循环的内部机制
2020/06/12 Python
Python 在局部变量域中执行代码
2020/08/07 Python
python sleep和wait对比总结
2021/02/03 Python
巧用CSS3的calc()宽度计算做响应模式布局的方法
2018/03/22 HTML / CSS
一些Solaris面试题
2015/12/22 面试题
Java程序员面试90题
2013/10/19 面试题
司仪主持词两篇
2014/03/22 职场文书
安全环保标语
2014/06/09 职场文书
群众路线教师自我剖析材料
2014/09/29 职场文书
2014社会治安综合治理工作总结
2014/12/04 职场文书
入党个人总结范文
2015/03/02 职场文书