关于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 三维变形实现立体方块特效源码
Dec 15 HTML / CSS
CSS3正方体旋转示例代码
Aug 08 HTML / CSS
详解CSS3+JS完美实现放大镜模式
Dec 03 HTML / CSS
推荐WEB开发者最佳HTML5和CSS3代码生成器
Nov 24 HTML / CSS
使用spring mvc+localResizeIMG实现HTML5端图片压缩上传的功能
Dec 16 HTML / CSS
canvas仿写贝塞尔曲线的示例代码
Dec 29 HTML / CSS
canvas简易绘图的实现(海绵宝宝篇)
Jul 04 HTML / CSS
HTML5基于flash实现播放RTMP协议视频的示例代码
Dec 04 HTML / CSS
html5移动端禁止长按图片保存的实现
Apr 20 HTML / CSS
background-position百分比原理详解
May 08 HTML / CSS
如何在CSS中绘制曲线图形及展示动画
May 24 HTML / CSS
CSS实现渐变色边框(Gradient borders)的5种方法
Mar 25 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
比较discuz和ecshop的截取字符串函数php版
2012/09/03 PHP
基于Zookeeper的使用详解
2013/05/02 PHP
php将文本文件转换csv输出的方法
2014/12/31 PHP
是 WordPress 让 PHP 更流行了 而不是框架
2016/02/03 PHP
使用PHP处理数据库数据如何将数据返回客户端并显示当前状态
2016/02/16 PHP
PHP 数组基本操作方法详解
2016/06/17 PHP
php实现的表单验证类完整示例
2019/08/13 PHP
jquery监控数据是否变化(修正版)
2011/04/12 Javascript
javascript 3d 逐侦产品展示(核心精简)
2014/03/26 Javascript
js中使用replace方法完成某个字符的转换
2014/08/20 Javascript
node.js抓取并分析网页内容有无特殊内容的js文件
2015/11/17 Javascript
RequireJS使用注意细节
2016/05/15 Javascript
基于jquery插件编写countdown计时器
2016/06/12 Javascript
Javascript的this用法
2017/01/16 Javascript
简易Vue评论框架的实现(父组件的实现)
2018/01/08 Javascript
JavaScript实现获取select下拉框中第一个值的方法
2018/02/06 Javascript
vue解决一个方法同时发送多个请求的问题
2018/09/25 Javascript
vue 解决form表单提交但不跳转页面的问题
2019/10/30 Javascript
js实现上下左右键盘控制div移动
2020/01/16 Javascript
Python处理RSS、ATOM模块FEEDPARSER介绍
2015/02/18 Python
Python的字典和列表的使用中一些需要注意的地方
2015/04/24 Python
详解Django通用视图中的函数包装
2015/07/21 Python
Python+django实现文件上传
2016/01/17 Python
python测试mysql写入性能完整实例
2018/01/18 Python
Python pygorithm模块用法示例【常见算法测试】
2018/08/16 Python
在Python中将函数作为另一个函数的参数传入并调用的方法
2019/01/22 Python
了解不常见但是实用的Python技巧
2019/05/23 Python
Python实现FLV视频拼接功能
2020/01/21 Python
世界上最悠久的自行车制造商:Ribble Cycles
2017/03/18 全球购物
中科软笔试题和面试题
2014/10/07 面试题
《水乡歌》教学反思
2014/04/24 职场文书
学校爱心捐款倡议书
2014/05/13 职场文书
党员作风建设自查报告
2014/10/23 职场文书
2014年科室工作总结范文
2014/12/19 职场文书
欢迎新生标语2015
2015/07/16 职场文书
DE1103使用报告
2022/04/05 无线电