CSS中填充和边缘两个属性如何使用

介绍

本篇文章给大家分享的是有关CSS中填充和边缘两个属性如何使用,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。

<强> CSS中填充,保证金两个重要属性的详细介绍及举例说明

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

以下说明保证金和填充属性:

1。保证金:包括margin-top、margin-right margin-bottom, margin-left,控制块级元素之间的距离,它们是透明不可见的,对于无花果。2所示的上右下左边缘值均为40像素,因此代码为:

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

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

<>之前保证金:,40 px  40 px  40 px  40 px;

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

 CSS中填充和边缘两个属性如何使用“> </p> <p>当上下,左右边缘值分别一致,可简写为:<br/> </p> <>之前保证金:,40 px  40 px; </pre> <p>前一个40 px代表上下边缘值,后一个40 px代表左右值。<br/>当上下左右边缘值均一致,可简写为:<br/> </p> <>之前保证金:,40 px; </pre> <p> 2。填充:包括padding-top、padding-right padding-bottom, padding-left,控制块级元素内部,内容与边境之间的距离,其代码,简写请参考保证金属性的写法。<br/>至此,我们已经基本了解保证金和填充属性的基本用法。但是,在实际应用中,却总是发生一些让你琢磨不透的事,而它们又或多或少的与边缘有关。<br/>注:当你想让两个元素的含量在垂直方向(垂直)分隔时,既可以选择padding-top/底部,也可以选择margin-top/底部,再此Jorux建议你尽量使用padding-top/底来达到你的目的,这是因为CSS中存在崩溃边缘(折叠的利润)的现象。</p> <p>崩溃利润:利润折叠现象只存在于临近或有从属关系的元素,垂直方向的利润中。文字说明可能让人费解、下面用一个例子说明margin-collapsing现象。<br/>例:在html文件的之间写入如下代码:<br/> </p> <pre> & lt; div  id=癐D1祝辞,& lt; h2  id=癐D2”祝辞Margins  of  ID1 以及ID2  collapse 垂直。你们,br/祝辞,元素ID1与ID2的利润率在垂直方向折叠.h2>, div> </pre> <p>在与其外联的CSS文件中写入:<br/> </p> <pre> *,{填充才能:0,,,保证金:0;,,},,# ID1 {,,背景颜色:# 333;,,颜色:,# FFF;,, margin-top:, 10 px;,, margin-bottom:, 10 px;,,},, # ID2 {字体才能:normal  14 px/1.5, Verdana,,无衬线,,,margin-top:, 30 px;,, margin-bottom:, 30 px;,,边界:,1 px  solid  # F00;,,} </pre> <p>代码解释:</p> <p> 1。在html写入的代码表示,在html中插入id分别为ID1和ID2的两个块级元素div, h2; </p> <p> 2。*{填充:0;保证金:0;}:使浏览器默认的元素填充和空白值均归零;</p> <p> 3。# ID1{…}:使id为ID1的元素div的背景颜色为# 333,字体颜色为# FFF, margin-top/底部为10 px; </p> <p> 4。# ID2{…}:使id为ID2的元素h2的字体大小为14 px, verdana字体,行高为字体高的150%,正常粗细。margin-top/底部为30 px,边框为1 px宽,红色实线。</p> <p>依据以上解释,我们应该得到如下效果(无花果。3):</p> <p> <img src=CSS中填充和边缘两个属性如何使用