关于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 08 HTML / CSS
CSS3制作hover下划线动画
Mar 27 HTML / CSS
CSS3中的display:grid,网格布局介绍
Oct 30 HTML / CSS
使用HTML5 Canvas绘制直线或折线等线条的方法讲解
Mar 14 HTML / CSS
html5 web本地存储将取代我们的cookie
Dec 26 HTML / CSS
HTML5之HTML元素扩展(下)—增强的Form表单元素值得关注
Jan 31 HTML / CSS
html5 worker 实例(一) 为什么测试不到效果
Jun 24 HTML / CSS
HTML5无刷新改变当前url的代码
Mar 15 HTML / CSS
前后端结合实现amazeUI分页效果
Aug 21 HTML / CSS
CSS3点击按钮圆形进度打钩效果的实现代码
Mar 30 HTML / CSS
使用CSS实现百叶窗效果示例代码
May 07 HTML / CSS
浅谈css清除浮动(clearfix和clear)的用法
May 21 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 生成随机验证码图片代码
2010/02/08 PHP
PHP OPP机制和模式简介(抽象类、接口和契约式编程)
2014/06/09 PHP
图文介绍PHP添加Redis模块及连接
2015/07/28 PHP
Yii rules常用规则示例
2016/03/15 PHP
Zend Framework入门应用实例详解
2016/12/11 PHP
PHP对象的浅复制与深复制的实例详解
2017/10/26 PHP
PHP实现的折半查找算法示例
2017/12/19 PHP
JavaScript 学习笔记(十五)
2010/01/28 Javascript
JavaScript学习笔记之JS对象
2015/01/22 Javascript
实现点击下箭头变上箭头来回切换的两种方法【推荐】
2016/12/14 Javascript
JS常用知识点整理
2017/01/21 Javascript
JavaScript中transform实现数字翻页效果
2017/03/08 Javascript
Node.JS 循环递归复制文件夹目录及其子文件夹下的所有文件
2017/09/18 Javascript
JS中offset和匀速动画详解
2018/02/06 Javascript
Ionic学习日记实现验证码倒计时
2018/02/08 Javascript
jQuery 实现批量提交表格多行数据的方法
2018/08/09 jQuery
微信小程序自定义轮播图
2018/11/04 Javascript
js实现跟随鼠标移动的小球
2019/08/26 Javascript
windows实现npm和cnpm安装步骤
2019/10/24 Javascript
加速vue组件渲染之性能优化
2020/04/09 Javascript
[05:06]2017亚洲邀请赛DAC回顾片
2017/04/19 DOTA
解析Python中的异常处理
2015/04/28 Python
读取json格式为DataFrame(可转为.csv)的实例讲解
2018/06/05 Python
python 划分数据集为训练集和测试集的方法
2018/12/11 Python
Python实现字典按key或者value进行排序操作示例【sorted】
2019/05/03 Python
Pandas DataFrame数据的更改、插入新增的列和行的方法
2019/06/25 Python
tornado+celery的简单使用详解
2019/12/21 Python
Selenium向iframe富文本框输入内容过程图解
2020/04/10 Python
Python中内建模块collections如何使用
2020/05/27 Python
Python计算矩阵的和积的实例详解
2020/09/10 Python
从当地商店送来的杂货:Instacart
2018/08/19 全球购物
质量月活动策划方案
2014/03/10 职场文书
高二学生评语大全
2014/04/25 职场文书
2016年习主席讲话学习心得体会
2016/01/20 职场文书
大学毕业生自我鉴定范文
2019/06/21 职场文书
2019年特色火锅店的创业计划书模板
2019/08/28 职场文书