关于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之动画在webapp中的应用
Nov 21 HTML / CSS
CSS3色彩模式有哪些?CSS3 HSL色彩模式的定义
Apr 26 HTML / CSS
html5 svg 中元素点击事件添加方法
Jan 16 HTML / CSS
HTML5 video 事件应用示例
Sep 11 HTML / CSS
【HTML5】3D模型--百行代码实现旋转立体魔方实例
Dec 16 HTML / CSS
详解前端HTML5几种存储方式的总结
Dec 27 HTML / CSS
canvas学习和滤镜实现代码
Aug 22 HTML / CSS
Html5移动端适配IphoneX等机型的方法
Jun 25 HTML / CSS
html5 canvas绘制网络字体的常用方法
Aug 26 HTML / CSS
详解CSS伪元素的妙用单标签之美
May 25 HTML / CSS
css3手动实现pc端横向滚动
Jun 21 HTML / CSS
详解CSS中postion和opacity及cursor的特性
Aug 14 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
全国FM电台频率大全 - 31 新疆维吾尔族自治区
2020/03/11 无线电
初品cakephp 入门基础
2012/02/16 PHP
js 匿名调用实现代码
2009/06/19 Javascript
js 字符串操作函数
2009/07/25 Javascript
自己编写的类似JS的trim方法
2013/10/09 Javascript
快速解决jQuery与其他库冲突的方法介绍
2014/01/02 Javascript
js返回上一页并刷新的多种实现方法
2014/02/26 Javascript
window.onerror()的用法与实例分析
2016/01/27 Javascript
ThinkJS中如何使用MongoDB的CURD操作
2016/12/13 Javascript
ES6新特性之Object的变化分析
2017/03/31 Javascript
浅谈nodejs中的类定义和继承的套路
2017/07/26 NodeJs
JavaScript中的return布尔值的用法和原理解析
2017/08/14 Javascript
Javascript中 toFixed四舍六入方法
2017/08/21 Javascript
微信小程序实现验证码获取倒计时效果
2018/02/08 Javascript
在vue组件中使用axios的方法
2018/03/16 Javascript
原生javascript实现连连看游戏
2019/01/03 Javascript
vue中注册自定义的全局js方法
2019/11/15 Javascript
three.js着色器材质的内置变量示例详解
2020/08/16 Javascript
vue 获取url参数、get参数返回数组的操作
2020/11/12 Javascript
python控制台显示时钟的示例
2014/02/24 Python
浅谈Pandas中map, applymap and apply的区别
2018/04/10 Python
《与孩子一起学编程》python自测题
2018/05/27 Python
python3.6的venv模块使用详解
2018/08/01 Python
python 用所有标点符号分隔句子的示例
2019/07/15 Python
python实现while循环打印星星的四种形状
2019/11/23 Python
Tensorflow与Keras自适应使用显存方式
2020/06/22 Python
Python调用ffmpeg开源视频处理库,批量处理视频
2020/11/16 Python
来自美国主售篮球鞋的零售商店:KICKSUSA
2017/11/28 全球购物
给老师的道歉信
2014/01/11 职场文书
商务英语广告词大全
2014/03/18 职场文书
企业文明单位申报材料
2014/05/16 职场文书
出售房屋协议书范本
2014/10/06 职场文书
2015年社区创卫工作总结
2015/04/21 职场文书
2015年三好一满意工作总结
2015/07/24 职场文书
Go使用协程交替打印字符
2021/04/29 Golang
vue使用refs获取嵌套组件中的值过程
2022/03/31 Vue.js