8内边距、边框和外边距

width和height都是针对内容区而言的,它们不能应用到行内非替换元素。width的值:<length>|<percentage>|auto|inherit,百分数相对于包含块的width。

元素背景会延伸到内边距中,但不会延伸到外边距中。margin设置元素的外边距,值:[<length>|<percentage>|auto]{1,4}|inherit,百分数相对于包含块的width。margin的长度可以是像素、英寸、毫米或em。margin-top、margin-right、matgin-bottom和margin-left可以用来设置单边外边距。元素可以设置负外边框,这会导致元素框超出其父元素,或者与其他元素重叠,但并不违反模型。行内非替换元素的外边距不会改变一个元素的行高。行内非替换元素的左右外边距是可见的。行内非替换元素应用负外边界,元素的上下外边距不受影响,行高也不受影响,不过元素的左右两端可能与其他内容重叠。为替换元素设置外边距会影响行高。

边框宽度的默认值为medium,这个值没有明确定义,不过通常是2个像素。默认的边框颜色是元素本身的前景色。边框绘制在“元素的背景之上”。border-style可以设置边框样式,值:[none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset]{1,4}|inherit.border-top-style,border-right-style,border-bottom-style,border-left-style可以设置单边边框样式。border-width可以设置边框宽度,值:[thin|medium|thick|<length>]{1,4}|inherit.border-top-width,border-right-width,border-bottom-width,border-left-width可以设置单边边框宽度。边框样式为none时,边框不存在。border-color可是设置边框颜色,值:[<color>|transparent]{1,4}|inherit.border-top-color,border-right-color,border-bottom-color,border-left-color可以设置单边边框颜色。transparent用于创建有宽度的不可见边框,这种透明的边框相当于内边距,因为元素的背景会有延伸到边框区(假设有可见的背景)。

边框属性可以简写为border,值:[<border-width>|<border-style>|<border-color>]|inherit.border-top,border-right,border-bottom,border-left是单边边框的简写。如果没有边框样式,默认样式值none会使得边框不复存在。

不论为行内元素的边框指定怎样的宽度,元素的行高都不会改变。如果应用一个左边框或右边框,不仅该框可见,而且文本会在其旁边显示(即不会覆盖)。

padding可以设置内边距,值:[<length>|<percentage>]{1,4}|inherit.百分数(特别注意上下边距也是一样相对width)相对于width。padding-top、padding-right、padding-bottom和padding-left可以设置单边的内边距。对于有背景色和内边距的行内非替换元素,背景可以向元素上面和下面延伸,但是不会改变行高。

原文地址:https://www.cnblogs.com/dingzibetter/p/6151755.html