关于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中的选择符
Oct 17 HTML / CSS
纯css3实现的动画按钮的实例教程
Nov 17 HTML / CSS
CSS3属性background-size使用指南
Dec 09 HTML / CSS
初探CSS3中的calc()功能
Jul 14 HTML / CSS
利用CSS3实现进度条的两种姿势详解
Mar 21 HTML / CSS
用纯CSS3实现网页中常见的小箭头
Oct 16 HTML / CSS
深入剖析webstorage[html5的本地数据处理]
Jul 11 HTML / CSS
HTML5如何使用SVG的方法示例
Jan 11 HTML / CSS
使用canvas实现黑客帝国数字雨效果
Jan 02 HTML / CSS
html5 canvas 实现光线沿不规则路径运动
Apr 20 HTML / CSS
一个基于canvas的移动端图片编辑器的实现
Oct 28 HTML / CSS
html,css,javascript是怎样变成页面的
May 07 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+FastCGI+Nginx配置PHP运行环境
2014/08/07 PHP
PHP基于自定义函数生成笛卡尔积的方法示例
2017/09/30 PHP
Laravel访问出错提示:`Warning: require(/vendor/autoload.php): failed to open stream: No such file or di解决方法
2019/04/02 PHP
yii2.0框架多模型操作示例【添加/修改/删除】
2020/04/13 PHP
cookie中的path与domain属性详解
2013/12/18 Javascript
jquery自动切换tabs选项卡的具体实现
2013/12/24 Javascript
javascript中apply和call方法的作用及区别说明
2014/02/14 Javascript
原生javascript实现addClass,removeClass,hasClass函数
2016/02/25 Javascript
简单讲解jQuery中的子元素过滤选择器
2016/04/18 Javascript
jQuery 3.0十大新特性
2016/07/06 Javascript
Vue.js学习示例分享
2017/02/05 Javascript
基于iScroll实现下拉刷新和上滑加载效果
2017/07/18 Javascript
vue使用axios时关于this的指向问题详解
2017/12/22 Javascript
Vue-Router2.X多种路由实现方式总结
2018/02/09 Javascript
JS实现的JSON数组去重算法示例
2018/04/11 Javascript
Bootstrap table中toolbar新增条件查询及refresh参数使用方法
2018/05/18 Javascript
ES10 特性的完整指南小结
2019/03/04 Javascript
JavaScript手写数组的常用函数总结
2020/11/22 Javascript
[04:40]DOTA2-DPC中国联赛1月26日Recap集锦
2021/03/11 DOTA
Python 自动化表单提交实例代码
2017/06/08 Python
详解Golang 与python中的字符串反转
2017/07/21 Python
python实现京东秒杀功能
2018/07/30 Python
Python去除字符串前后空格的几种方法
2019/03/04 Python
Python 实现输入任意多个数,并计算其平均值的例子
2019/07/16 Python
手动安装python3.6的操作过程详解
2020/01/13 Python
Python 带星号(* 或 **)的函数参数详解
2021/02/23 Python
网友共享的几个面试题关于Java和Unix等方面的
2016/09/08 面试题
商铺租赁意向书
2014/04/01 职场文书
大学生自荐材料范文
2014/12/30 职场文书
病危通知单
2015/04/17 职场文书
2015年家长学校工作总结
2015/04/22 职场文书
立项申请报告范本
2015/05/15 职场文书
2016年暑期教师培训心得体会
2016/01/09 职场文书
2016教师读书思廉心得体会
2016/01/23 职场文书
HTTP中的Content-type详解
2022/01/18 HTML / CSS
mysql分组后合并显示一个字段的多条数据方式
2022/01/22 MySQL