精华内容
下载资源
问答
  • CSS中margin属性详解

    千次阅读 多人点赞 2018-06-15 10:06:36
    margin属性概述margin是CSS层叠样式表用来规定围绕元素边框周围空白区域范围的属性.该接受任何长度单位,可以是像素、英寸、毫米或 em。相关属性margin 可以单独改变元素的上,下,左,右边距。也可以一次改变...

    margin属性概述

    margin是CSS层叠样式表中用来规定围绕在元素边框周围空白区域范围的属性.

    该接受任何长度单位,可以是像素、英寸、毫米或 em。

    相关属性

    margin 可以单独改变元素的上,下,左,右边距。也可以一次改变所有的属性。

    属性描述
    margin简写属性。在一个声明中设置所有外边距属性。
    margin-bottom设置元素的下外边距。
    margin-left设置元素的左外边距。
    margin-right设置元素的右外边距。
    margin-top设置元素的上外边距。

    使用语法

    1.使用单独属性设置四边的距离
    #d2 {
            border: 1px solid blue; /*为了显示效果,所以让d2有了边框 */
            margin-top: 20px;       /*上边距为20px*/
            margin-right: 30px;     /*右边距为30px*/
            margin-bottom: 40px;    /*下边距40px*/
            margin-left: 50px;      /*左边距为50px*/
        }

    ​ 效果:

    2.直接使用margin属性设置所有外边距:
    
    #d2 {
            border: 1px solid blue; /*为了显示效果,所以让d2有了边框 */
            margin: 20px 30px 40px 50px; /*和上图所示效果完全一样,相当于上个案例的简化写法*/
        }
    3.使用margin简化写法注意事项:
    • 如果提供全部四个参数值,将按上、右、下、左的顺序作用于四边。

    • 如果只提供一个,将用于全部的四边。

    • 如果提供两个,第一个用于上、下,第二个用于左、右。

    • 如果提供三个,第一个用于上,第二个用于左、右,第三个用于下。

    margin合并(折叠)

    注意,在使用CSS的margin属性时,会出现margin属性的合并(折叠)的现象.

    这种合并分为两种: 并列元素的合并和嵌套元素的合并

    1.并列元素的合并:

    具体表现为:

    ​ 当两个元素并列时,两者相隔的外边距,取的是两者所设置margin的最大值。

    例如:

    2.嵌套元素的合并:

    具体表现为:

    ​ 当两个元素嵌套到一起,并且没有内边距或边框把外边距分隔开时,它们的外边距也会发生合并

    例如:

    3.margin折叠注意事项:
    1. margin折叠只发生在块级元素上;

    2. 浮动元素的margin不与任何margin发生折叠;

    3. 设置了属性overflow且值不为visible的块级元素,将不与它的子元素发生margin折叠;

    4. 绝对定位元素的margin不与任何margin发生折叠;

    5. 根元素的margin不与其它任何margin发生折叠;

    注意事项

    注意,在实际开发中.margin-bottom和margin-top需要特别说明

    • 替代(Replaced)行内元素可以应用这两个属性。

    • 非替代(non-Replaced)行内元素要使用该属性,则必须先使该对象表现为块级或行内块级。

    • 外延边距始终透明。

    也就是说,普通的行内元素是无法使用该属性的.

    例如:

    <html>
        <head>
            <meta charset="UTF-8">
            <title>关于margin-bottom和margin-top</title>
            <style>
                div{
                    border: 1px solid red;
                }
                span{
                    border: 1px solid blue;
                    margin-top: 20px;
                    margin-top: 20px;
                }           
            </style>
        </head>
        <body>
            <div>内容体</div>
            <span>我是span</span>
            <div>内容体</div>
        </body>
    </html>

    结果: -->完全没有任何效果

    解决方案:

    1. 当元素是行内元素时,不使用该属性

    2. 把该元素转换为块级元素或者行内块级元素

    扩展-块级元素和行级元素

    块级元素
    1. 总是在新行上开始,占据一整行;

    2. 高度,行高以及外边距和内边距都可控制;

    3. 宽度与内容无关;

    4. 它可以容纳任何元素。

      行级元素

    5. 和其他元素都在一行上;

    6. 不可以设置宽高,其宽度随着内容增加,高度随字体大小而改变,宽高只与内容有关,

    7. 行内元素只能容纳文本或者其他行内元素。

    8. 可以设置外边界margin,但margin不对上下起作用,只能对左右起作用,

    转换

    ​ 行级元素与块级元素之间可以通过css的display属性进行转换

    扩展-替换和不可替换元素

    从元素本身的特点来讲,元素可以分为替换元素和不可替换元素。

    替换元素:
    • 替换元素就是浏览器根据元素的标签和属性,来决定元素的具体显示内容。

    • 例如:

      <img src="cat.jpg"/>
      浏览器会根据<img>标签的src属性的值来读取图片信息并显示出来.
      而如果查看HTML代码,则看不到图片的实际内容;
      <input type="submit" value="提交"/>
      浏览器是根据<input>标签的type属性,来决定是显示输入框,还是单选按钮等
    • 所以,HTML中的<img>、<input>、<textarea>、<select>、<object>都是替换元素。这些元素往往在源代码中并没有实际的内容,而是要通过浏览器的解析才能显示出不同的效果.,

    不可替换元素
    • 不可替换元素指的是内容直接表现给用户端(例如浏览器)的元素。

    • 例如:

      <p>段落的内容</p>就是一个不可替换元素,浏览器上显示的内容就是标签

    展开全文
  • 盒模型基本属性有两个:padding和margin。 以边框border为界,边框里面是内边距,边框外面是外边距。 一.外边距margin: 外边距是边框以外与其他同级元素之间的距离,外边距可以控制同级元素之间的距离( 用于设置...

    盒模型基本属性有两个:padding和margin。

    以边框border为界,边框里面是内边距,边框外面是外边距。
    在这里插入图片描述

    一.外边距margin:

    外边距是指边框以外与其他同级元素之间的距离,外边距可以控制同级元素之间的距离( 用于设置同级标签的间距)。
    1.margin的复合式写法:

    margin:10px;(表示元素上下左右外边距都是10px)

    margin:10px 10px;(表示元素上下外边距是10px,左右外边距是10px)

    margin:10px 10px 10px;(表示元素上外边距是10px,左右外边距是10px,下外边距是10px)

    margin:10px 10px 10px 10px;(表示元素上外边距是10px,右外边距是10px,下外

    边距是10px,左外边距是10px)
    2.margin的分开式写法:

    margin-top: 10px;(表示元素上外边距是10px)

    margin-right: 10px;(表示元素右外边距是10px)

    margin-bottom: 10px;(表示元素下外边距是10px)

    margin-left: 10px;(表示元素左外边距是10px)

    3.margin:0 auto;——水平居中显示。
    4.*{margin:0;}——取消浏览器为HTML文档中各标签设置的margin默认值,方便后面设置。
    5.块级元素的垂直相邻外边距会合并(即外边距合并),合并后的外边距间距等于两个外边距高度中的较大者(例子);行内元素实际上不占上下外边距;行内元素的的左右外边距不会合并(例子);浮动元素的外边距也不会合并;

    二.内边距padding:

    声明中设置元素内边距的宽度,或者设置各边上内边距的宽度
    1.padding的复合式写法:

    padding:10px;(表示元素上下左右内边距都是10px)

    padding:10px 10px;(表示元素上下内边距是10px,左右内边距是10px)

    padding:10px 10px 10px;(表示元素上内边距是10px,左右内边距是10px,下内边距是10px)

    padding:10px 10px 10px 10px;(表示元素上内边距是10px,右内边距是10px,下内

    边距是10px,左内边距是10px)

    2.padding的分开式写法:

    padding-top: 10px;(表示元素上内边距是10px)

    padding-right: 10px;(表示元素右内边距是10px)

    padding-bottom: 10px;(表示元素下内边距是10px)

    padding-left: 10px;(表示元素左内边距是10px)
    3.*{padding:0;}——取消浏览器为HTML文档中各标签设置的padding默认值,方便后面设置.
    4.行内非替换元素上设置的内边距不会影响行高计算,因此如果一个元素既有内边距又有背景,从视觉上看可能会延伸到其他行,有可能还会与其他内容重叠;元素的背景会延伸穿过内边距;

    展开全文
  • CSS边距属性定义元素周围的空间。通过使用单独的属性,可以对上、右、下、左的外边距进行设置。也可以使用简写的外边距属性同时改变所有的外边距。——W3School 边界(margin):元素周围生成额外的空白区。“空白区”...
  •  你真的了解margin吗?你知道margin有什么特性吗?你知道什么是垂直外边距合并?margin在块元素、内联元素的区别?...写css,你少不了与margin打交道,而对于这个平时我们最常用的css属性我们并非十分了解。介
    

    你真的了解margin吗?你知道margin有什么特性吗?你知道什么是垂直外边距合并?margin在块元素、内联元素中的区别?什么时候该用padding而不是margin?你知道负margin吗?你知道负margin在实际工作中的用途吗?常见的浏览器下margin出现的bug有哪些?……

    写css,你少不了与margin打交道,而对于这个平时我们最常用的css属性我们并非十分了解。介于此我打算写下这篇文章,一来是自己工作中的总结,也是对自己知识的一次梳理。


    Margin是什么

    CSS 边距属性定义元素周围的空间。通过使用单独的属性,可以对上、右、下、左的外边距进行设置。也可以使用简写的外边距属性同时改变所有的外边距。——W3School
    边界,元素周围生成额外的空白区。“空白区”通常是指其他元素不能出现且父元素背景可见的区域。——CSS权威指南


    我比较喜欢使用“外边距”这个词来解释margin(同理padding可以称之为“内边距”,但是我又恰恰喜欢称呼padding为“补白”或者“留白”),我们可以很清楚的了解到margin的最基本用途就是控制元素周围空间的间隔,从视觉角度上达到相互隔开的目的。

    Margin的特性
    margin始终是透明的。

    margin通过使用单独的属性,可以对上、右、下、左的外边距进行设置。即:margin-top、margin-right、margin-bottom、margin-left。

    外边距的 margin-width 的值类型有:auto | length | percentage

    也可以使用简写的外边距属性同时改变所有的外边距:margin: top right bottom left;(eg: margin:10px 20px 30px 40px) 记忆方式是元素周围正上方顺时针“上右下左”记忆。

    并且规范还提供了省略的数值写法,基本如下:

    1、如果margin只有一个值,表示上右下左的margin同为这个值。例如:margin:10px; 就等于 margin:10px 10px 10px 10px;

    2、如果 margin 只有两个值,第一个值表示上下margin值,第二个值为左右margin的值。例如:margin:10px 20px; 就等于 margin:10px 20px 10px 20px;


    3、如果margin有三个值,第一个值表示上margin值,第二个值表示左右margin的值,第三个值表示下margin的值。例如:margin:10px 20px 30px; 就等于 margin:10px 20px 30px 20px;

    4、如果margin有四个值,那这四个值分别对应上右下左这四个margin值。例如:margin:10px 20px 30px 40px;

    在实际应用中,个人不推荐使用三个值的margin,一是容易记错,二是不容易日后修改,一开始如果写成margin:10px 20px 30px;日后需求改动为上10px,右30px,下30px,左20px,你不得不还是得把这个margin拆开为margin:10px 30px 30px 20px;费力且不讨好,不如一开始就老老实实的写成margin:10px 20px 30px 20px;来的实在,不要为了现在节省俩个字节而让日后再次开发的成本上升。

    垂直外边距合并问题

    别被上面这个名词给吓倒了,简单地说,外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。你可以查看CSS外边距合并了解这个基本知识。

    实际工作中,垂直外边距合并问题常见于第一个子元素的margin-top会顶开父元素与父元素相邻元素的间距,而且只在标准浏览器下(FirfFox、Chrome、Opera、Sarfi)产生问题,IE下反而表现良好。例子可以查看下面代码(IE下表现“正常”,标准浏览器下查看出现“bug”):

    <html xmlns="http://www.w3.org/1999/xhtml">
     
    <head>
     
    <title>垂直外边距合并</title>
     
    <style>
     
    .top{width:160px; height:50px; background:#ccf;}
     
    .middle{width:160px; background:#cfc;}
     
    .middle .firstChild{margin-top:20px;}
     
    </style>
     

    </head>
     

    <body>
     
    <div class="top"></div>
     
    <div class="middle">
     
      <div class="firstChild">我其实只是想和我的父元素隔开点距离。</div>
     

      <div class="secondChild"></div>
     
    </div>
     
    </body>
     
    </html>

    如果按照CSS规范,IE的“良好表现”其实是一个错误的表现,因为IE的hasLayout渲染导致了这个“表现良好”的外观。而其他标准浏览器则会表现出“有问题”的外观。好了,如果你读过了上面W3Shcool的CSS外边距合并的文章后,就很容易讨论这个问题了。这个问题发生的原因是根据规范,一个盒子如果没有上补白(padding-top)和上边框(border-top),那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠

    再说了白点就是:父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding.就会不断一层一层的找自己“领导”(父元素,祖先元素)的麻烦。只要给领导设置个有效的 border或者padding就可以有效的管制这个目无领导的margin防止它越级,假传圣旨,把自己的margin当领导的margin执行。

    对于垂直外边距合并的解决方案上面已经解释了,为父元素例子中的middle元素增加一个border-top或者padding-top即可解决这个问题。

    一般说来这个问题解释到这里,大多数文章就不会再深入下去了,但作为一名实战开发者,最求的是知其然知其所以然,原本使用margin-top就是为了与父元素隔开距离,而按照你这么一个解法,其实是一种“修复”,为了“弥补修复”这个父子垂直外边距合并这个CSS规范“Bug”,而强制在父元素上使用border-top和padding-top,不舒服,也不容易记住,下次再发生这样的情况还是会忘记这条准则,而且在页面设计稿里如果不需要border-top加个上边框,这么一加反而画蛇添足,为以后修改留下隐患。
    为什么一定要用border-top,padding-top去为了这么一个所谓的标准规范而多写这么一行代码呢?答案你可以参考另外一篇文章用Margin还是用Padding里找到答案。

    用Margin还是用Padding

    何时应当使用margin:
    需要在border外侧添加空白时。
    空白处不需要背景(色)时。
    上下相连的两个盒子之间的空白,需要相互抵消时。如15px + 20px的margin,将得到20px的空白。

    何时应当时用padding:
    需要在border内测添加空白时。
    空白处需要背景(色)时。
    上下相连的两个盒子之间的空白,希望等于两者之和时。如15px + 20px的padding,将得到35px的空白。

    个人认为:margin是用来隔开元素与元素的间距;padding是用来隔开元素与内容的间隔。margin用于布局分开元素使元素与元素互不相干;padding用于元素与内容之间的间隔,让内容(文字)与(包裹)元素之间有一段“呼吸距离”。
    这里我截取了部分另外一篇文章的内容,详细内容请见用Margin还是用Padding

    margin在块元素、内联元素中的区别
    HTML(这里说的是html标准,而不是xhtml)里分两种基本元素,即block和inline。顾名思义,block元素就是以”块”表现的元素(block-like elements),inline元素即是以”行”表现的元素(character level elements and text strings)。二者表现的主要差别在于,在页面文档中block元素另起一行开始,并独占一行。inline元素则同其他inline元素共处一行。

    block元素(块元素)大致有:P|H1|H2|H3|H4|H5|H6|UL|OL|PRE| DL | DIV | NOSCRIPT | BLOCKQUOTE | FORM | HR | TABLE | FIELDSET | ADDRESS(随着html5标准的推进,一些元素将被废除,而一些新的元素将被引入)注意的是并非所有的block元素的默认display属性都是block,像table这种display:table的元素也是block元素。

    inline元素(内联元素)大致有:#PCDATA(即文本)| TT | I | B | BIG | SMALL|EM | STRONG | DFN | CODE |SAMP | KBD | VAR | CITE | ABBR | ACRONYM|A | IMG | OBJECT | BR | SCRIPT | MAP | Q | SUB | SUP | SPAN | BDO|INPUT | SELECT | TEXTAREA | LABEL | BUTTON

    其中有类特殊的元素:如img|input|select|textarea|button|label等,他们被称为可置换元素(Replaced element)。他们区别一般inline元素(相对而言,称non-replaced element)是:这些元素拥有内在尺寸(intrinsic dimensions),他们可以设置width/height属性。他们的性质同设置了display:inline-block的元素一致。

    或许有朋友对非置换元素(non-replaced element)有点疑惑,稍微帮助大家理解一下。非置换元素,W3C 中没有给出明确的定义,但我们从字面可以理解到,非置换元素对应着置换元素(replaced element),也就是说我们搞懂了置换元素的含义,就懂了非置换元素。置换元素,W3C中给出了定义:

    “An element that is outside the scope of the CSS formatter, such as an image, embedded document, or applet”


    从定义中我们可以理解到,置换元素(replaced element)主要是指 img, input, textarea, select, object 等这类默认就有 CSS 格式化外表范围的元素。进而可知,非置换元素(non-replaced element)就是除了 img, input, textarea, select, object 等置换元素以外的元素。

    margin在块级元素下,他的性能可以完全体现,上下左右任你设定。且记住块级元素的margin的参照基准是前一个元素即相对于自身之前的元素有margin距离。如果元素是第一个元素,则就是相对于父元素的margin距离(但第一个元素相对于父元素margin-top而父元素又没有设定padding-top/border-top的话要需要印证上面的垂直外边距合并的知识)
    margin也能用于内联元素,这是规范所允许的,但是margin-top和margin-bottom对内联元素(对行)的高度没有影响,并且由于边界效果(margin效果)是透明的,他也没有任何的视觉影响。

    这是因为边界应用于内联元素时不改变元素的行高度,如果你要改变内联元素的行高即类似文本的行间距,那么你只能使用这三个属性:line-height,fong-size,vertical-align。请记住,这个影响内联元素高度的是line-height而不是height,因为内联元素是一行行的,定一个height的话,那这到底是整段inline元素的高呢?还是inline元素一行的高呢?这都说不准,所以统一都给每行定一个高,只能是line-height了。

    margin-top/margin-bottom对内联元素没有多大实际效果,不过margin-left/margin-right还是能够对内联元素产生影响的。应用margin:10px 20px 30px 40px;,左边这个css如果写在inline元素上,他的效果大致是,上下无效果,左边离他相邻元素或者文本距离为40px,右边离他相邻元素或者文本距离为20px。你可以自行尝试一番。

    最后在内联元素中还有上文我们提到的非可置换inline元素(non-replaced element),这些个元素img|input|select|textarea|button|label 虽然是内联元素,但margin依旧可以影响到他的上下左右!

    总结下来margin 属性可以应用于几乎所有的元素,除了表格显示类型(不包括 table-caption, table and inline-table)的元素,而且垂直外边距对非置换内联元素(non-replaced inline element)不起作用。

    负margin技术及其应用
    在margin所有的实际应用中,负margin技术是我学习css路上最重要一课之一,许多高级应用和页面上的疑难杂症都可以用负margin技术来实现。margin技术是那么的有用,限于篇幅我又不想草草了事,所以我决定专门为他写一篇文章,详细的说明他的效果、原理、及其应用。

    常见的浏览器下margin出现的bug

    林林总总写了那么多,最后总结一些浏览器中常见的margin Bug吧,以后遇到margin下的布局问题可以查看这里找到解决的方案,如果你还发现其他关于浏览器下margin的Bug你可以发表留言,核对采纳后我会及时添加进去,感谢你的分享:

    IE6中双边距Bug:

    发生场合:当给父元素内第一个浮动元素设置margin-left(元素float:left)或margin-right(元素float:right)时margin加倍。
    解决方法:是给浮动元素加上display:inline;CSS属性;或者用padding-left代替margin-left。

    原理分析:块级对象默认的display属性值是block,当设置了浮动的同时,还设置了它的外边距就会出现这种情况。也许你会问:“为什么之后的对象和第一个对象之间就不存在双倍边距的Bug”?因为浮动都有其相对应的对象,只有相对于其父对象的浮动对象才会出现这样的问题。第一个对象是相对父对象的,而之后对象是相对第一个对象的,所以之后对象在设置后不会出现问题。为什么display:inline可以解决这个双边距bug,首先是inline元素或inline-block元素是不存在双边距问题的。然后,float:left等浮动属性可以让inline元素haslayout,会让inline元素表现得跟inline-block元素的特性一样,支持高宽,垂直margin和padding等,所以div class的所有样式可以用在这个display inline的元素上。

    IE6中浮动元素3px间隔Bug:

    发生场合:发生在一个元素浮动,然后一个不浮动的元素自然上浮与之靠近会出现的3px的bug。
    解决方法:右边元素也一起浮动;或者为右边元素添加IE6 Hack _margin-left:-3px;从而消除3px间距。
    原理分析:IE6浏览器缺陷Bug。

    IE6/7负margin隐藏Bug:

    发生场合:当给一个有hasLayout的父元素内的非hasLayout元素设置负margin时,超出父元素部分不可见。
    解决方法:去掉父元素的hasLayout;或者赋hasLayout给子元素,并添加position:relative;
    原理分析:IE6/7独有的hasLayout产生问题。

    IE6/7下ul/ol标记消失bug:

    发生场合:当ul/ol触发了haslayout并且是在ul/ol上写margin-left,前面默认的ul/ol标记会消失。
    解决方法:给li设置margin-left,而不是给ul/ol设置margin-left。
    原理分析:IE6/7浏览器Bug

    IE6/7下margin与absolute元素重叠bug:

    发生场合:双栏自适应布局中,左侧元素absolute绝对定位,右侧的margin撑开距离定位。在IE6/7下左侧应用了absolute属性的块级元素与右边的自适应的文字内容重叠。
    解决方法:把左侧块级元素更改为内联元素,比如把div更换为span。
    原理分析:这是由于IE6/IE7浏览器将inline水平标签元素和block水平的标签元素没有加以区分一视同仁渲染了。属于IE6/7浏览器渲染Bug。

    IE6/7/8下auto margin居中bug:

    发生场合:给block元素设置margin auto无法居中
    解决方法:出现这种bug的原因通常是没有Doctype,然后触发了ie的quirks mode,加上Doctype声明就可以了。在《打败IE的葵花宝典》里给出的方法是给block元素添加一个width能够解决,但根据本人亲测,加with此种方法是无效的,如果没有Doctype即使给元素添加width也无法让block元素居中。
    原理分析:缺少Doctype声明。

    IE8下input[button | submit] 设置margin:auto无法居中

    发生场合:ie8下,如果给像button这样的标签(如button input[type="button"] input[type="submit"])设置{ display: block; margin:0 auto; }如果不设置宽度的话无法居中。
    解决方法:可以给为input加上宽度
    原理分析:IE8浏览器Bug。

    IE8百分比padding垂直margin bug:

    发生场合:当父元素设置了百分比的padding,子元素有垂直的margin的时候,就好像父元素被设置了margin一样。
    解决方法:给父元素加一个overflow:hidden/auto。
    原理分析:IE8浏览器Bug。

    展开全文
  • 本文将讲述HTML和CSS的关键—盒子模型(Box ... 理解Box model的关键便是margin和padding属性, 而正确理解这两个属性也是学习用css布局的关键. 注: 为什么不翻译margin和padding? 原因一,

    转自:http://leepiao.blog.163.com/blog/static/485031302010427113653/


    本文将讲述HTML和CSS的关键—盒子模型(Box model). 理解Box model的关键便是margin和padding属性, 而正确理解这两个属性也是学习用css布局的关键.

    : 为什么不翻译margin和padding? 原因一, 在汉语中并没有与之相对应的词语; 原因二: 即使有这样的词语, 由于在编写css代码时, 必须使用margin和padding, 如果我们总用汉语词语代替其来解释的话, 到了实际应用时容易混淆margin和padding的概念.

    如果有一点Html基础的话, 就应该了解一些基本元素(Element), 如p, h1~h6, br, div, li, ul, img等. 如果将这些元素细分, 又可以分别归为顶级(top-level)元素,块级(block-level) 元素和内联(inline)元素.

    1. Block-level element: 指能够独立存在, 一般的块级元素之间以换行(如一个段落结束后另起一行)分隔. 常用的块级元素包括: p, h1~h6, div, ul等;

    2. Inline element: 指依附其他块级元素存在, 紧接于被联元素之间显示, 而不换行. 常用的内联元素包括: img, span, li, br等;

    3. Top-level element: 包括html, body, frameset, 表现如Block-level element, 属于高级块级元素.

    块级元素是构成一个html的主要和关键元素, 而任意一个块级元素均可以用Box model来解释说明.

    Box Model: 任意一个块级元素均由content(内容), padding, background(包括背景颜色和图片), border(边框), margin五个部分组成. 立体图如下(Fig. 1):

    j

    该立体图引自:http://www.hicksdesign.co.uk/ (Under the Creative Commons License)

    平面图如下(Fig. 2):

    j

    根据以上两图, 相信大家对于Box model会有个直观的认识.

    以下说明margin和padding属性:

    1. Margin: 包括margin-top, margin-right, margin-bottom, margin-left, 控制块级元素之间的距离, 它们是透明不可见的, 对于Fig. 2所示的上右下左margin值均为40px, 因此代码为:

    margin-top: 40px;
    margin-right: 40px;
    margin-bottom: 40px;
    margin-left: 40px;

    根据上, 右, 下, 左的顺时针规则, 简写为

    margin: 40px 40px 40px 40px;

    为便于记忆, 请参考下图:

    j

    当上下, 左右margin值分别一致, 可简写为:

    margin: 40px 40px;

    前一个40px代表上下margin值, 后一个40px代表左右margin值.

    当上下左右margin值均一致, 可简写为:

    margin: 40px;

    2. Padding: 包括padding-top, padding-right, padding-bottom, padding-left, 控制块级元素内部, content与border之间的距离, 其代码, 简写请参考margin属性的写法.

    至此, 我们已经基本了解margin和padding属性的基本用法. 但是, 在实际应用中, 却总是发生一些让你琢磨不透的事, 而它们又或多或少的与margin有关.

    : 当你想让两个元素的content在垂直方向(vertically)分隔时, 既可以选择padding-top/bottom, 也可以选择margin-top/bottom, 再此Jorux建议你尽量使用padding-top/bottom来达到你的目的, 这是因为css中存在Collapsing margins(折叠的margins)的现象.

    Collapsing margins: margins折叠现象只存在于临近或有从属关系的元素, 垂直方向的margin中. 文字说明可能让人费解, 下面用一个例子说明margin-collapsing现象.

    : 在html文件的<body></body>之间写入如下代码:

    <div id=”ID1″>
    <h1 id=”ID2″>Margins of ID1 and ID2 collapse vertically.<br/>元素ID1与ID2的margins在垂直方向折叠.</h1>
    </div>

    在与其外联的css文件中写入:

    * {
    padding:0;
    margin:0;
    }
    #ID1 {
    background-color: #333;
    color: #FFF;
    margin-top: 10px;
    margin-bottom: 10px;
    }
    #ID2 {
    font: normal 14px/1.5 Verdana, sans-serif;
    margin-top: 30px;
    margin-bottom: 30px;
    border: 1px solid #F00;
    }

    代码解释:

    1. 在html写入的代码表示, 在html中插入id分别为ID1和ID2的两个块级元素div, h1;

    2. *{padding:0; margin:0;}: 使浏览器默认的元素padding和margin值均归零;

    3. #ID1{…}: 使id为ID1的元素div的背景颜色为#333, 字体颜色为#FFF, margin-top/bottom为10px;

    4. #ID2{…}: 使id为ID2的元素h1的字体大小为14px, verdana字体, 行高为字体高的150%, 正常粗细. margin-top/bottom为30px, 边框为1px宽, 红色实线.

    依据以上解释, 我们应该得到如下效果(Fig. 3):

    j

    即ID1的margin-top/bottom=ab=ef=10px;

    ID2的margin-top/bottom=bc=de=30px;

    但用浏览器打开html文件, 却得到Example4的 效果, 如下图(Fig. 4):

    j

    即ab=cd=30px, ID1的margin-top/bottom=10px被折叠了, 而且ID1应有的margin黑色背景也一同被折叠消失了.

    为什么会折叠: 造成以上现象的原因是, 我们在css中并没有声明id为ID1的元素div的height(高), 因此它的高便被设为auto(自动)了. 一旦其值被设为auto, 那么浏览器就会认为它的高为子元素ID2的border-top到border-bottom之间的距离, 即Fig. 4中bc的长度, 所以子元素ID2的margin-top/bottom(30px)就伸出到了父元素ID1之外, 出现了Fig. 4中ab与cd之间的空白区域. 因此父元素ID1的margin-top/bottom因子元素的”红杏出墙”而被折叠消失了.

    如何解决折叠问题: 可能大家最初想到的办法就是根据折叠发生的原因—auto, 来解决问题. 但是, 在实际操作中, 某些元素如div, h1, p等, 我们是不可能预先知道它的高是多少的, 因此在css文件中是不能常规通过声明元素的高来解决折叠问题.

    我们需要在css文件中加入如下代码(红色部分):

    #ID1 {
    background-color: #333;
    color: #FFF;
    margin-top: 10px;
    margin-bottom: 10px;
    padding-top:1px;
    padding-bottom:1px;
    }

    或是:

    #ID1 {
    background-color: #333;
    color: #FFF;
    margin-top: 10px;
    margin-bottom: 10px;
    border-top:1px solid #333;
    border-bottom:1px solid #333;
    }

    通过增加以上代码, 便可使浏览器重新计算ID1的高, 使其为子元素ID2的margin-top/bottom外缘(outer top/bottom)之间的距离, 即Fig. 3中be的距离. 

    简单说来:

    也就是说 设置margin 那么它所占据的空白地方会在边框外面,设置padding它所占据的空白地方是在边框里面,而且在IE6以下的版本中存在着padding计算错误的bug。CSS的宽度属性本来是不包含padding的,但是在IE下面有的时候是包含padding,所以建议在熟悉CSS定位的时候,都使用margin属性。

    展开全文
  • 这篇文章是转载的,对于理解css中margin/padding/border这些概念很有帮助CSS 有个重要的概念,就是盒子模式 (Box model)。胡戈的"一个馒头引发的血案"有个圆圈套圆圈娱乐城,而这个盒子模式套用这句话来说,...
  • 在CSS中margin从自身边框到另一个容器边框之间的距离,就是容器外距离。在CSS中padding是自身边框到自身内部另一个容器边框之间的距离,就是容器内距离。 下面讲解 padding和margin常用的用法 一...
  • 这篇文章是转载的,对于理解css中margin/padding/border这些概念很有帮助CSS 有个重要的概念,就是盒子模式 (Box model)。胡戈的"一个馒头引发的血案"有个圆圈套圆圈娱乐城,而这个盒子模式套用这句话来说,...
  • 想修改一下子自己的CSS,因为博客...margin在中文我们翻译成外边距或者外补白(本文引用外边距)。他是元素盒模型(box model)的基础属性。一、margin的基本特性margin属性包括margin-top,margin-right,margin-
  • css中margin、padding、border详解

    千次阅读 2017-08-10 18:26:26
    CSS 有个重要的概念,就是盒子模式 (Box model)。 先看看下面这个图,黑框包围的一个方块,...4、content (内容,比如文本,图片等)CSS 边距属性 (margin) 是用来设置一个元素所占空间的边缘到相邻元素之间的距离。
  • 你真的了解margin吗?你知道margin有什么特性吗?你知道什么是垂直外边距合并?margin在块元素、内联元素的区别?...写css,你少不了与margin打交道,而对于这个平时我们最常用的css属性我们并非十分了解。介于此我打
  • HTML布局,对元素设置内边距padding和外边距margin, padding 的是元素实际内容和元素边框之间的距离,的是边框和内容之间的留白区域 margin 的是元素实际内容区域以外,加入的留白区域 padding和margin...
  • 正确理解CSS中margin合并

    千次阅读 2018-03-13 09:13:32
    margin合并是块级元素的上外边距与下外边距有时会合并为单个外边距,有两点需要理解。 1. 块级元素,不包括浮动和绝对定位元素 2. 只发生和当前文档流方向的相垂直的方向上 场景 一、相邻兄弟元素...
  • margin中文我们翻译成外边距或者外补白(本文引用外边距)。他是元素盒模型(box model)的基础属性。一、margin的基本特性 margin属性包括margin-top,...属性margin可以用来同时设置box的四边外边距,而其
  • 本文将讲述HTML和CSS的关键—盒子模型(Box model). 理解Box model的关键便是margin和padding属性, ... 原因二: 即使有这样的词语, 由于编写css代码时, 必须使用margin和padding, 如果我们总用汉语词
  • 在CSS中margin从自身边框到另一个容器边框之间的距离,就是容器外距离。在CSS中padding是自身边框到自身内部另一个容器边框之间的距离,就是容器内距离。   下面讲解 padding和margin常用的用法   ...
  • 理解Box model的关键便是margin和padding属性, 而正确理解这两个属性也是学习用css布局的关键.注: 为什么不翻译margin和padding? 原因一, 汉语并没有与之相对应的词语; 原因二: 即使有这样的词语, 由于编写...
  • css中的auto是自动适应的意思,而在css中auto往往都是默认值。正如margin:0 auto,意思就是上下边距为0,左右边距为auto,就是自动适应。但是,如果要使用他的话,就必须给标签配上指定的宽度,如下:<div class=...
  • CSS中margin:auto失效原因

    千次阅读 2017-02-18 19:21:11
    1.要给居中的元素一个宽度,否者无效。...display:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签。 目前IE8+以及其他现代浏览器都是支持此属性的。我们都知道,单元格有一些比较特别的属
  • css中padding、margin两个重要属性的详细介绍及举例说明

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 41,613
精华内容 16,645
关键字:

在css中属性margin是指