Question

如何计算CSS盒子模型的高度

<a href="http://google.com/">Google</a>
{
font-size: 12px
padding: 5px;
margin: 5px;
}
那么这个<a>元素的高度应该是多少？是22px吗？可是我用PS做了一张22PX高的背景图却矮了一些，请问盒子模型的高度应该怎么计算啊？

Answer 1

盒子的高度 = content的高度 + padding-top(内上边距)+ padding-bottom(内下边距) + border-top(上边框边框) + border-bottom(下边框)

深入理解CSS盒子模型（The CSS Box Model）

　　如果了解了盒子模型（box model）的概念，了解它是如何决定某一个元素的最终尺寸的话，会有助理解一个元素如何在网页上定位的。盒子模型主要适用于块级元素。顺便提一个与此相关的概念：行内布局模型（inline layout model）——定义了行内元素是如何定位的，在行内元素格式（InlineFormatting）中有具体说明

盒子的尺寸的计算（Calculating BoxDimensions）

　　在CSS2.1中，块级元素只能是矩形形状的。当计算一个块级元素的整体尺寸时，需要同时把内容区域（content area）［注释1］的长宽，连同此元素的外边距，内边距，以及边框都计算在内

　　可以通过声明宽和高来定义一个元素的内容（content）的宽度和高度。如果没有做任何的声明，宽度和高度的默认值将是自动（auto）

　　对于浮动（floated）和绝对定位（absolutelypositioned）元素（包括固定定位（fixed）元素）来说， 自动状态的宽度会使generated box收缩到紧贴它内容大小。

　

　　我们知道，当我们放置一个块级元素于页面上时，并且不设置它的定位属性（relative，absolute，fixed），即position:static，或者设置了position:relative的情况下，块的宽度是延伸自动填充满它的父元素的宽度区域

Answer 2

盒子是针对块元素的，高度是这样算的
height+padding+border
你要制作一个背景，只要计算height+padding。在你的提问里，得固定下height的高度，例如20px。 那么背景高度是 20+5+5=30px

Answer 3

IE5以上的浏览器以及其他的浏览器已经统一了盒模型尺寸的计算方式。即：

【实际高度】=【预设高度】+【padding-top】+【padding-bottom】

margin是不计算在内的。另外你忽略了文字默认的行高。 你得把A的display定义成block，然后加上尺寸。 一般来说。font还有一个默认的行高，也即line-height ， 如果不定义高度，默认的a的高度应该是font的行高，而不是font-size的值。综合盒模型高的计算公式，你现在的高度应该是

【实际高度】=【line-height】+【5px】+【5px】

【建议】
1.定义一下行高。
2.或者定义a为block，并加尺寸。（推荐）

Answer 4

font-size不代表那啥,一般好像有个0.7几的比值,不那样用.试着这样:
<a href="http://google.com/">Google</a>
{
font-size: 12px
line-height: 20px;
padding-left: 5px;
padding-right: 5px;
margin: 5px;
}

Answer 5

给你的a设置position为固定就行了