1.margin是什么？ margin用于控制元素周围空间的间隔，从视觉上达到空间间隔的目的。相对于前一个元素有相应的外边距。用于隔开元素与元素的。始终是透明的。 2.外边距的合并问题（参见w3school）---前提：元素出于文档流中 2.1 两个垂直外边距相遇时，在垂直方向上会发生外边距的叠加，最终的外边距等于二者的较大值； 2.2 当一个元素（没有边框和内边距）包含另外一个元素时，将在垂直方向上发生叠加； 2.3 当一个元素为空元素时...
转载自 http://www.cnblogs.com/zhuzhenwei918/p/6124263.html深入理解css中的margin属性 之前我一直认为margin属性是一个非常简单的属性，但是最近做项目时遇到了一些问题，才发现margin属性还是有一些“坑”的，下面我会介绍margin的基本知识以及那些“坑”。这篇博文主要分为以下几个部分：margin--基础知识margin--在同级元素（非父子关系）之间应用margin--在父元素和子元素之间应用（重点）margin--margin值的单位为%时的...
margin塌陷解决方法：1、给父级顶加上一条线，不太合适。2、bfcblock format context设定bfc后，特定的盒子会遵循另一套语法规则，解决了margin塌陷触发bfc元素1）position:absolute;2）display:inline-block;3）float:left/right;4）overflow:hidden; //溢出和隐藏 原文：https://www.cnblogs.com/xibuhaohao/p/10343128.html
塌陷问题 当两个盒子在垂直方向上设置margin值时，会出现一个有趣的塌陷现象。①垂直并列 首先设置两个DIV,并为其制定宽高 1 /*HTML部分*/2 <body>3 <div class="box1">box1</div>4 <div class="box2">box2</div>5 </body>6 /*CSS部分*/7 <style> 8 *{9 margin: 0; 10 padding: 0; 11 } 12 .box1{ 13 width: 200px; 14 height: 200px; 15 backgrou...
原文 简书原文：https://www.jianshu.com/p/5f18f12cd162大纲 1、什么是外边距合并？(折叠外边距) 2、外边距带来的影响 3、折叠的结果 4、产生折叠的原因 5、出现的情况1、什么是外边距合并？(折叠外边距) 外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。而左右外边距不合并。 在CSS当中，相邻的两个盒子（可能是兄弟关...
前段时间我同事对于margin和padding应用百分比值似乎有些误解，觉得可能是个普遍问题，所以觉得有必要拿出来单独写一下。margin和padding都可以使用百分比值的，但有一点可能和通常的想法不同，就是margin-top | margin-bottom | padding-top | padding-bottom 的百分比值参照的不是容器的高度，而是宽度 。引用标准(2.1)原来的表达： The percentage is calculated with respect to the width of the generated box‘s containing...
<div class="inp" id="userdiv"><label for="UserID" class="inp_lab" id="LabelUserID" onfocus="nameFocus();"> 帐 号 </label><input name="loginusername" type="text" id="txtUsername" onfocus="nameFocus();"/></div><div class="inp"><label for="UserPassword" class="inp_lab" id="LabelUserPassword"> 密码 </label><input name="loginpassword" type="password" id="txtPassword"/></div>css.inp { margin:0 25px 13px...
hack： 父元素的盒子包含一个子元素盒子，给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值，而子元素和父元素的边距则没有发生变化。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>无标...
很多初学制作网页的朋友，可能会遇到的一个常见问题，就是在CSS中加了margin:0 auto;却没有效果，不能居中的问题，margin:0 auto;的意思就是：上下边界为0，左右根据宽度自适应，其实就是水平居中的意思，在这里说两个典型的错误引起的不能居中的问题：1、没有设置宽度<div style="margin:0 auto;"></div>看看上面的代码，根本没有设置DIV的宽度，如何根据宽度自适应呢？新手比较容易忽略的问题。2、没声明DOCTYPE1）DOCTYPE是docu...
本文给大家分享css中很基础的知识，我们知道CSS中margin和padding是有区别的，在CSS中margin是指从自身边框到另一个容器边框之间的距离，就是容器外距离。在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离，就是容器内距离。下面讲解 padding和margin常用的用法。一、padding1、语法结构（1）padding-left:10px; 左内边距（2）padding-right:10px; 右内边距（3）padding-top:10px; 上内边距（4）padding-bottom:10px...
深入理解css中的margin属性 之前我一直认为margin属性是一个非常简单的属性，但是最近做项目时遇到了一些问题，才发现margin属性还是有一些“坑”的，下面我会介绍margin的基本知识以及那些“坑”。这篇博文主要分为以下几个部分：margin--基础知识margin--在同级元素（非父子关系）之间应用margin--在父元素和子元素之间应用（重点）margin--margin值的单位为%时的几种情况 第一部分：margin--基础知识 要介绍margin的基础知...
这次给大家带来CSS中的margin负值如何使用，我们知道CSS中的margin是可以设置成负值的，那么使用margin的负值有哪些注意事项，下面就是实战案例，一起来看一下。1.margin先接触，然后是border，然后是padding，然后是content2.值为负值，将不再占据空间例：.exmp{ width: 480px; margin-right:-450px; }只会占据30px的横向宽度。如果.exmp设置左浮动，那么.exmp后面的左浮动兄弟元素将从30px之后排列相信看了本文案例你已经掌握了方...
margin-right其实有效果的，只是在默认即标准流的情况的下显示不出来效果。如果脱离标准流呢？想到这个，就立马在css文件中加了一个：float:right;然后在测试的时候就能看到margin-right的效果了 今天在群里面，有人抛出了一个关于css中margin-right没有效果的问题。CSS代码和HTML代码如下： 代码如下:.style1{ width:400px; height:440px; background-color :red; border:5px solid silver; margin-top :20%; margin-right:...
1.margin的百分比值普通元素的百分比maigin相对于容器元素的宽度(width) 进行计算的。这里我们在图片外面设置一个宽高分别为800 * 600的容器。设置img{ margin: 10%; } 结果如下 结果margin值都是 800 * 10% = 80px; 所以这里都是相对于容器的宽度计算的 容器的宽度计算 容器的宽度计算。说三遍 2.绝对定位的百分比maigin值相对于第一个定位的祖先元素的 width值计算的。就是 parent 的 width = 1000px. 所以 margin = 100px； 3.可...
这次给大家带来css中的margin属性详解，使用css中margin的注意事项有哪些，下面就是实战案例，一起来看一下。之前我一直认为margin属性是一个非常简单的属性，但是最近做项目时遇到了一些问题，才发现margin属性还是有一些“坑”的，下面我会介绍margin的基本知识以及那些“坑”。这篇博文主要分为以下几个部分：margin--基础知识margin--在同级元素（非父子关系）之间应用margin--在父元素和子元素之间应用（重点）margin--margin...