网页元素的大小和边距

网页中元素的大小和边距,主要由 width, height, margin, border, padding 这些属性来设置。

width 和 height 是指的宽度和高度,可以设置为度量长度,比例长度或者自动(auto)。例如:

<div id="one" style="120px; height:80px">hello one</div>
<div id="two" style="12%; height:8%">hello two</div> 

另外还有 max-width, max-height, min-width, min-height 这几个属性,它们用于设置元素大小的最大和最小值。这些属性配合比例长度来使用比较合适。对于行内非替换元素,比如 <a>,<em>,<span> 等,将无法设置它的 height 属性,它们的高度由字体大小和行高决定。

margin 是该元素和相邻元素的外边距,可以用以空格分隔的四个长度值来分别设置上右下左几个边距值,或者分别用 margin-top, margin-right, margin-bottom 和 margin-left 来设置。对于行内非替换元素,垂直方向的 margin 无效。

padding 是该元素的内边距,即元素里面的内容与边框的距离。与 margin 类似,这几个属性同样有上下左右四个方向可以设置。对于行内非替换元素,可以设置垂直方向的 padding ,但不会影响元素的位置。

注意当设置 margin 和 padding 为比例宽度时,不管是左右还是上下,都是按照元素的宽度来计算的。

border 用于设置元素的边框,包括宽度,样式和颜色,可以一起设置也可以分别用 border-width,border-style,border-color 来设置。例如

p {
    border: 1px solid gray;
}

参考资料:

[1] CSS 框模型概述
[2] The CSS Box Model
[3] W3C CSS2 - Box model #margin-properties
[4] CSS:IE 中 border:none 的陷阱
[5] Inline elements and padding | Max Design

[YAML] Date: 2011-05-14 15:37:43, Updated: 2013-06-03 12:36:00

原文地址:https://www.cnblogs.com/zoho/p/2432140.html