大连建网站公司,wordpress 主题 pdf,深圳wap网站建设,如何做各大网站广告链接元素的外边距#xff08;margin#xff09;是围绕在元素边框以外#xff08;不包括边框#xff09;的空白区域#xff0c;这片区域不受 background 属性的影响#xff0c;始终是透明的。
为元素设置外边距
默认情况下如果不设置外边距属性#xff0c;HTML 元素就是不会…元素的外边距margin是围绕在元素边框以外不包括边框的空白区域这片区域不受 background 属性的影响始终是透明的。
为元素设置外边距
默认情况下如果不设置外边距属性HTML 元素就是不会有外边距但也有例外的情况因为浏览器会为一些 HTML 元素设置默认的外边距例如p元素。您可以使用下面的属性来为 HTML 元素设置外边距
margin-top设置元素上方的外边距margin-bottom设置元素下方的外边距margin-right设置元素右侧的外边距margin-left设置元素左侧的外边距margin外边距的简写属性可以同时设置元素四个方向上下左右的外边距。
上述外边距属性的可选值如下表所示
值描述auto由浏览器计算外边距的尺寸length使用具体数值配合 px、cm 等单位来定义元素外边距的尺寸可以为负值默认值为 0px%定义基于父元素的宽度百分比的外边距可以为负值inherit从父元素继承外边距属性的值
【示例】使用 margin-top、margin-bottom、margin-right、margin-left 几个属性分别设置元素四个方向上的外边距
!DOCTYPE htmlhtmlheadstylediv.box-one {border: 1px solid red;display:inline-block; /*将元素转换为行内元素*/}div.box-two {/*为了能更直观的看出效果这里为元素设置上边框和背景色*/border: 1px solid black;background: #CFF;width: 200px;height: 80px;margin-top: 10px;margin-right: 1em;margin-left: 1cm;}div.box-three {/*为了能更直观的看出效果这里为元素设置上边框和背景色*/border: 1px solid #CCC;background: #CCC;width: 180px;height: 100px;margin-top: 10px;margin-bottom: 1em;margin-right: 10px;margin-left: 1cm;}/style/headbodydiv classbox-onediv classbox-twomargin-top: 10px;brmargin-right: 1em;brmargin-left: 1cm;/divdiv classbox-threemargin-top: 10px;brmargin-bottom: 1em;brmargin-right: 10px;brmargin-left: 1cm;/div/div/body/html运行结果如下图所示 图margin-top、margin-bottom、margin-right、margin-left 属性演示
这里需要特别说明一下 margin 属性与其它几个属性不同margin 属性可以接受 1~4 个参数参数之间使用空格分隔
如果提供四个参数那么将按照上、右、下、左的顺序分别作用于元素四个方向的外边距如果提供三个参数那么第一个参数会作用在元素上方的外边距第二个参数会作用在元素左右两侧的外边距第三个参数则作用在元素下方的外边距如果提供两个参数那么第一个参数会作用在元素上方和下方的外边距第二个参数会作用在元素的左右两侧的外边距如果只提供一个参数那么这个值将同时作用于元素上下左右四个方向的外边距。
【示例】使用 margin 属性为元素设置外边距
!DOCTYPE htmlhtmlheadstylediv.box-one {border: 1px solid red;display:inline-block; /*将元素转换为行内元素*/}div.box-two {/*为了能更直观的看出效果这里为元素设置上边框和背景色*/border: 1px solid black;background: #CFF;width: 200px;height: 100px;margin: 10px 1em;}div.box-three {/*为了能更直观的看出效果这里为元素设置上边框和背景色*/border: 1px solid #CCC;background: #CCC;width: 150px;height: 50px;margin: 10px 0px 1ex 1em;}/style/headbodydiv classbox-onediv classbox-twomargin: 10px 1em;/divdiv classbox-threemargin: 10px 0px 1ex 1em;/div/div/body/html运行结果如下图所示 图margin 属性演示
外边距折叠
外边距折叠指的是相邻的两个或多个外边距会在垂直方向上发生合并合并为一个外边距。关于外边距折叠有以下几点需要注意
margin 折叠只发生在块级元素上浮动元素的外边距不会与任何外边距发生折叠设置了 overflow 属性且值不为 visible 的块级元素将不会与它的子元素发生外边距折叠绝对定位元素的外边距不与任何外边距发生折叠根元素例如body的外边距不与其它任何外边距发生折叠。
在相邻的两个兄弟元素之间
如果相邻两个元素外边距的值都为正数那么两个元素的实际间距为两个外边距中较大的那个如果相邻两个元素外边距的值都为负数那么两个元素的实际间距为两个外边距中较小的那个如果相邻两个元素外边距的值一个为正数、一个为负数那么两个元素之间的实际间距为两个外边距相加的和。 图相邻兄弟元素之间的外边距折叠
在父元素与其子元素之间注意父元素不能定义边框和内边距且父元素与子元素之间不能有其它元素
如果父元素与子元素外边距的值都为正数那么折叠后的外边距为两个外边距中较大的那个如果父元素与子元素外边距的值都为负数那么折叠后的外边距为两个外边距中较小的那个如果父元素与子元素外边距的值一个为正数、一个负数那么折叠后的外边距为两个外边距相加的和。 图父元素与其子元素之间的外边距折叠
原文地址CSS外边距
