一个元素的内边距、边框和外边距属性会影响着整个文档如何布局,更重要的是,它们会严重影响给定元素的外观。

高度和宽度

这两个属性不能应用到行内非替换元素,其高度和宽度由链接的内容确定,而不是由创作人员确定。正常流中的元素很少有设定的高度。

外边距和内边距

如果元素有背景,则会影响使用内边距和外边距,因为背景会延伸到内边距中,但不会延伸到外边距。为元素指定的内边距和外边距会影响元素的背景何时结束。

为内容区的个边增加10像素空白,margin:10px,类似于html的hspace和vspace,设置一个图像周围的额外空间。margin遵循一下模式:

margin:top right bottom left。这些值自上而下围着元素顺时针旋转,如果想呈现你想要的效果,就必须正确安排值的顺序。当其中一个值缺省的时候,将会按照以下规则:

1)如果缺少左外边距的值,则使用右外边距的值。

2)如果缺少下外边距的值,则使用上外边距的值。

3)如果缺少右外边距的值,则使用上外边距的值。

换句话说,如果为外边距指定3个值,则第4个值将会从第2个复制得到。如果给定两个值,第4个值会从第2个值复制得到,第3个值会从第1个值得到。

单边外距属性,对于margin:auto auto auto 3em;等同于margin-left:3em;可以使用单一的margin-top、margin-right、margin-bottom和margin-left单一设置外边距。

上小节讨论过”负外边距和合并外边距“的规则:正常流中垂直相邻块级元素外边距会合并。但是当外边距应用到行内非替换元素,她对行高没有任何影响。由于外边距实际上是透明的,所以这个声明没有任何视觉效果,原因在于行内非替换元素的外边距不会改变一个元素的行高。

但是注意,行内非替换元素之前的字的结尾与行内元素背景的边界之间有额外的一个空间。如果愿意可以在行内元素的两端都增加这个额外的空间:

<p style="font-size:12px;line-height:14px;">
This is text<em>some of which emphasized</em>,plus other text<br>which id <strong style ="margin:25px;background:silver">strongly emphasized</strong>and which is<br>larger than the surrounding text.
</p>

效果如下:

如果向行内非替换元素应用负外边距,情况会更有意思。元素的上下外边距不受影响,行高也不会受影响,不过元素的左右两端可能与其他内容重叠。

替换元素有所不同:为替换元素设置的外边距确实会影响行高,可能会使行高增加或减少,这取决于上下外边距的值。行内替换元素的左右外边距与替换元素的左右外边距的作用一样。

边框

每个边框都有3个方面:其宽度或粗细、其样式或外观,以及其颜色。边框的默认样式是none,不一定能看到边框。默认的边框颜色是元素本身的前景色,如果没有为边框声明颜色,它将与元素文本颜色相同。

边框的样式

如果一个边框没有样式,就要没有宽度,不过有些情况下你可能向创建一个不可见的边框。这就引入了边框颜色transparent,这个值用于创建有宽度的不可见边框。这种透明边框相当于内边距,因此元素的背景会延伸到边框区(假设有可见的背景)。

百分数值和内边距

可以为元素的内边距设置百分数值。向外边距一样,百分数值要相对于其父元素的width计算,所以如果父元素的width改变,它们也会改变。

注意,上下内边距与左右内边距一直;也就是说,上下内边距会相对于父元素的宽度计算,而不是相对于高度。

css细节复习笔记——内边距、边框和外边距的更多相关文章

  1. CSS权威指南 - 内边距 边框 和 外边距

    九十年代的完全用表格布局,简单的段落边框都需要用表格.CSS让布局更方便. 基本元素框 basic element boxes 如同第七章基本视觉格式化那一章讲到,每个文档元素会生成一个元素框,这个框 ...

  2. css细节复习笔记——基本视觉格式化

    css包含如此开放.如此强大的一个模型,对于这样一个模型,可以有无数种方法结合应用各种属性,可以得到的效果数不胜数. 基本框 css假定每个元素都会生成一个或多个矩形框,这称为元素框.各元素中心有一个 ...

  3. css细节复习笔记——结构与层叠

    每个合法的文档都会生成一个结构树,有了结构树元素的祖先.属性兄弟元素等等创建选择器来选择元素,这是CSS继承的核心.继承是从一个元素向后代元素传递属性值所采用的机制.面向一个元素使用哪些值时,用户代理 ...

  4. css细节复习笔记——浮动

    CSS除了能够改变字体.背景和所有其他属性,还能够完成基本布局任务. div+css通过浮动和定位.盒子模型等技术应用,是最常用的布局方式. 定位的基本思想很简单,它允许定义元素框相对于其正常位置应该 ...

  5. CSS 框模型——规定了元素框处理元素内容、内边距、边框和外边距的方式

    转自:http://www.w3school.com.cn/css/css_boxmodel.asp 要知道在父元素:float, rel, abs位置情况下,box模型的变换情况,请见:http:/ ...

  6. CSS框模型(框模型概述、内边距、边框、外边距、外边距合并)

    CSS 框模型概述 CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边距.边框 和 外边距 的方式. 元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景. ...

  7. [04-05]box框模型(Box Model)定义了元素框处理元素内容、内边距、边框和外边距的方式

    实际占有的宽 = width + 2padding(内边距) + 2border(边框) + 2margin(外边距) 实际占有的高 = height + 2padding + 2border + 2 ...

  8. 2 CSS盒子模型&边框&轮廓&外边距&填充&分组嵌套&尺寸&display与visibility

    盒子模型 Box  Model 所有HTML元素可以看做盒子,CSS模型本质上是一个盒子,封装周围的HTML元素 包括:边距,边框,填充和实际内容 盒子模型允许我们在其他元素和周围元素边框之间的空间放 ...

  9. padding(内边距)、margin(外边距)、border(边框)

    元素的 padding 控制元素内容 content和元素边框 border 之间的距离. 元素的外边距 margin 控制元素边框 border 和元素实际所占空间的距离,如果你将一个元素的 mar ...

随机推荐

  1. snmp获取设备相关管理信息

    在本文中,作者将向我们展示如何用snmp代理监视网络设备,甚至发送软件警告. 网络上很多代理在为我们服务.只要我们开启UDP/161,162端口,这些代理就会以Management Informati ...

  2. oracle执行sql文件

    oracle执行sql文件 在PL/SQL中直接用command window执行就可以了: PL/SQL developer----->File------>New---->com ...

  3. XP系统下 VS2010 选中行崩溃

  4. 响应式设计的思考:媒体查询(media query)

    Jason Grigsby发表了篇文章,<CSS Media Query for Mobile is Fool’s Gold>对媒体查询(media query)吐槽,大意是在移动设备上使 ...

  5. ThreadLocal<T> 类

    using System; using System.Threading; using System.Threading.Tasks; class ThreadLocalDemo { // Demon ...

  6. Mac 下输入特殊字符

    [Mac 下输入特殊字符] 快捷键是 Control + Commans + Space

  7. go_Map

    go语言中map使用哈希表,必须可以比较相等 除了slice,map,function的内建类型都可以作为key Struct类型不包括上述字段,也可作为key map中的key是无序的 packag ...

  8. 使用java代码编辑oracle数据库

    package com.hanqi; import java.io.IOException; import java.sql.Connection; import java.sql.DriverMan ...

  9. 关于ErrorPage

    JSP里创建一个网页test.jsp, 让这个网页上面出现一个错误, 再创建一个切换页面error.jsp, 使test.jsp如果出现错误就切换到error.jsp上, 但是怎么试都是出现一个网页上 ...

  10. 105. Construct Binary Tree from Preorder and Inorder Traversal (Tree; DFS)

    Given preorder and inorder traversal of a tree, construct the binary tree. Note: You may assume that ...