关于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 相关文章推荐
html5+css3气泡组件的实现
Nov 21 HTML / CSS
详解HTML5中垂直上下居中的解决方案
Dec 20 HTML / CSS
把富文本的回车转为br标签
Aug 09 HTML / CSS
html5绘制时钟动画
Dec 15 HTML / CSS
用HTML5制作一个简单的弹力球游戏
May 12 HTML / CSS
使用HTML5 Canvas API绘制弧线的教程
Mar 22 HTML / CSS
使用html2canvas.js实现页面截图并显示或上传的示例代码
Dec 18 HTML / CSS
Html5适配iphoneX刘海屏的简单实现
Apr 09 HTML / CSS
HTML5 Canvas 实现K线图的示例代码
Dec 23 HTML / CSS
HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码
Apr 10 HTML / CSS
CSS3 制作的书本翻页特效
Apr 13 HTML / CSS
详解盒子端CSS动画性能提升
May 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
在PHP3中实现SESSION的功能(二)
2006/10/09 PHP
php字符串截取中文截取2,单字节截取模式
2007/12/10 PHP
php入门小知识
2008/03/24 PHP
phpMyAdmin2.11.6安装配置方法
2008/08/24 PHP
php获取mysql数据库中的所有表名的代码
2011/04/23 PHP
php查看网页源代码的方法
2015/03/13 PHP
Yii2.0中的COOKIE和SESSION用法
2016/08/12 PHP
jQuery 中使用JSON的实现代码
2011/12/01 Javascript
JS对象转换为Jquery对象示例
2014/01/26 Javascript
javascript打开word文档的方法
2014/04/16 Javascript
10条建议帮助你创建更好的jQuery插件
2015/05/18 Javascript
javaScript中定义类或对象的五种方式总结
2016/12/04 Javascript
javaScript字符串工具类StringUtils详解
2017/12/08 Javascript
vue2.0实现前端星星评分功能组件实例代码
2018/02/12 Javascript
jQuery UI实现动画效果代码分享
2018/08/19 jQuery
Vue resource三种请求格式和万能测试地址
2018/09/26 Javascript
jQuery 操作 HTML 元素和属性的方法
2018/11/12 jQuery
详解Vue This$Store总结
2018/12/17 Javascript
npm的lock机制解析
2019/06/20 Javascript
微信小程序开发(三):返回上一级页面并刷新操作示例【页面栈】
2020/06/01 Javascript
vue自定义指令限制输入框输入值的步骤与完整代码
2020/08/30 Javascript
三步搞定:Vue.js调用Android原生操作
2020/09/07 Javascript
vue vant中picker组件的使用
2020/11/03 Javascript
深入理解Python 关于supper 的 用法和原理
2018/02/28 Python
python基于http下载视频或音频
2018/06/20 Python
python使用Windows的wmic命令监控文件运行状况,如有异常发送邮件报警
2021/01/30 Python
一款纯css3实现的鼠标经过按钮特效教程
2014/11/09 HTML / CSS
世界上最悠久的自行车制造商:Ribble Cycles
2017/03/18 全球购物
优秀英语专业毕业生求职信
2013/11/23 职场文书
《圆明园的毁灭》教学反思
2014/02/28 职场文书
应届生自荐书
2014/06/23 职场文书
老龄工作先进事迹
2014/08/15 职场文书
社保缴纳证明申请书
2014/11/03 职场文书
出纳2015年度工作总结范文
2015/10/14 职场文书
小学三年级班主任工作经验交流材料
2015/11/02 职场文书
tomcat正常启动但网页却无法访问的几种解决方法
2022/05/06 Servers