关于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制作的2015年元旦雪人动画特效教程
Dec 29 HTML / CSS
CSS超出文本指定宽度用省略号代替和文本不换行
May 05 HTML / CSS
CSS3实现水平居中、垂直居中、水平垂直居中的实例代码
Feb 27 HTML / CSS
CSS3 border-radius圆角的实现方法及用法详解
Sep 14 HTML / CSS
Html5新增标签与样式及让元素水平垂直居中
Jul 11 HTML / CSS
使用canvas绘制贝塞尔曲线
Dec 17 HTML / CSS
H5 canvas实现贪吃蛇小游戏
Jul 28 HTML / CSS
HTML5 移动页面自适应手机屏幕四类方法总结
Aug 17 HTML / CSS
Canvas制作的下雨动画的示例
Mar 06 HTML / CSS
AmazeUI中各种的导航式菜单与解决方法
Aug 19 HTML / CSS
如何查看浏览器对html5的支持情况
Dec 15 HTML / CSS
纯CSS实现一个简单步骤条的示例代码
Jul 15 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&amp;java(三)
2006/10/09 PHP
php中使用parse_url()对网址进行解析的实现代码(parse_url详解)
2012/01/03 PHP
javascript 表格排序和表头浮动效果(扩展SortTable)
2009/04/07 Javascript
jquery validation插件表单验证的一个例子
2010/03/03 Javascript
google 搜索框添加关键字实现代码
2010/04/24 Javascript
jquery $.getJSON()跨域请求
2011/12/21 Javascript
8款非常棒的响应式jQuery 幻灯片插件推荐
2012/02/02 Javascript
JS模块与命名空间的介绍
2013/03/22 Javascript
Jquery实现弹出层分享微博插件具备动画效果
2013/04/03 Javascript
JS保存和删除cookie操作 判断cookie是否存在
2013/11/13 Javascript
深入理解JavaScript高级之词法作用域和作用域链
2013/12/10 Javascript
jQuery实现菜单感应鼠标滑动动画效果的方法
2015/02/28 Javascript
全面解析Bootstrap表单使用方法(表单样式)
2015/11/24 Javascript
基于KO+BootStrap+MVC实现的分页控件代码分享
2016/11/07 Javascript
函数四种调用模式以及其中的this指向
2017/01/16 Javascript
jQuery插件ContextMenu自定义图标
2017/03/15 Javascript
javascript数据结构之串的概念与用法分析
2017/04/12 Javascript
详解angularJs中关于ng-class的三种使用方式说明
2017/06/02 Javascript
Vue项目引进ElementUI组件的方法
2018/11/11 Javascript
详解Js里的for…in和for…of的用法
2019/03/28 Javascript
通过扫小程序码实现网站登陆功能
2019/08/22 Javascript
VUE实现密码验证与提示功能
2019/10/18 Javascript
Vue+ElementUI table实现表格分页
2019/12/14 Javascript
[02:56]DOTA2矮人直升机 英雄基础教程
2013/11/26 DOTA
pytorch torch.expand和torch.repeat的区别详解
2019/11/05 Python
python 实现快速生成连续、随机字母列表
2019/11/28 Python
python-视频分帧&amp;多帧合成视频实例
2019/12/10 Python
用Python生成HTML表格的方法示例
2020/03/06 Python
linux系统下pip升级报错的解决方法
2021/01/31 Python
利用CSS3的线性渐变linear-gradient制作边框的示例
2016/06/02 HTML / CSS
蔬菜基地的创业计划书
2014/01/06 职场文书
暑期培训随笔感言
2014/03/10 职场文书
幼儿园中班上学期评语
2014/04/18 职场文书
离婚撤诉申请书范本
2015/05/18 职场文书
Java org.w3c.dom.Document 类方法引用报错
2021/08/07 Java/Android
使用Ajax实现进度条的绘制
2022/04/07 Javascript