关于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 mask遮罩实现一些特效
Oct 24 HTML / CSS
利用css3径向渐变做一张优惠券的示例
Mar 22 HTML / CSS
HTML5文档结构标签
Apr 21 HTML / CSS
HTML5 微格式和相关的属性名称
Feb 10 HTML / CSS
HTML5实践-图片设置成灰度图
Nov 12 HTML / CSS
html5中地理位置定位api接口开发应用小结
Jan 04 HTML / CSS
程序设计HTML5 Canvas API
Apr 08 HTML / CSS
HTML5 绘制图像(上)之:关于canvas元素引领下一代web页面的问题
Apr 24 HTML / CSS
HTML5 在canvas中绘制文本附效果图
Jun 23 HTML / CSS
HTML5不支持标签和新增标签详解
Jun 27 HTML / CSS
关于iframe跨域使用postMessage的实现
Oct 29 HTML / CSS
canvas绘制太极图的实现示例
Apr 29 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采用get获取url汉字出现乱码的解决方法
2014/11/13 PHP
深入探究PHP的多进程编程方法
2015/08/18 PHP
完美解决phpexcel导出到xls文件出现乱码的问题
2016/10/29 PHP
javascript 解析url的search方法
2010/02/09 Javascript
网站如何做到完全不需要jQuery也可以满足简单需求
2013/06/27 Javascript
ajax请求乱码的解决方法(中文乱码)
2014/04/10 Javascript
jQuery CSS()方法改变现有的CSS样式
2014/08/20 Javascript
Jquery实现仿腾讯娱乐频道焦点图(幻灯片)特效
2015/03/06 Javascript
浅析AngularJS中的生命周期和延迟处理
2015/06/18 Javascript
Ajax清除浏览器js、css、图片缓存的方法
2015/08/06 Javascript
jQuery语法小结(超实用)
2015/12/31 Javascript
关于网页中的无缝滚动的js代码
2016/06/09 Javascript
分享javascript、jquery实用代码段
2016/10/20 Javascript
bootstrapfileinput实现文件自动上传
2016/11/08 Javascript
Bootstrap输入框组件简单实现代码
2017/03/06 Javascript
vue element-ui 绑定@keyup事件无效的解决方法
2018/03/09 Javascript
Vue单页及多页应用全局配置404页面实践记录
2018/05/22 Javascript
解决Angular4项目部署到服务器上刷新404的问题
2018/08/31 Javascript
怎样在vue项目下添加ESLint的方法
2019/05/16 Javascript
vue-quill-editor插入图片路径太长问题解决方法
2021/01/08 Vue.js
[43:58]DOTA2上海特级锦标赛C组败者赛 Newbee VS Archon第二局
2016/02/27 DOTA
[57:55]EG vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python基础教程之数字处理(math)模块详解
2014/03/25 Python
python使用参数对嵌套字典进行取值的方法
2019/04/26 Python
bluepy 一款python封装的BLE利器简单介绍
2019/06/25 Python
python3 批量获取对应端口服务的实例
2019/07/25 Python
Python类继承和多态原理解析
2020/02/05 Python
Python学习之路之pycharm的第一个项目搭建过程
2020/06/18 Python
Python用户自定义异常的实现
2020/12/25 Python
英国第一职业高尔夫商店:Clickgolf.co.uk
2020/11/18 全球购物
物业保安主管岗位职责
2013/12/25 职场文书
集体婚礼证婚词
2014/01/13 职场文书
工程技术负责人岗位职责
2015/04/13 职场文书
学习心理学心得体会
2016/01/22 职场文书
Mysql中mvcc各场景理解应用
2022/08/05 MySQL
go goth封装第三方认证库示例详解
2022/08/14 Golang