日期:2014-05-16  浏览次数:20694 次

CSS学习之道:margin和padding
图解CSS的padding,margin,border属性
margin和padding

W3C组织建议把所有网页上的对像都放 在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落、列表、标题、图片以及层。盒模型主要定义四个区域:内容 (content)、边框距(padding)、边界(border)和边距(margin)。 对于初学者,经常会搞不清楚margin,background-color,background- image,padding,content,border之间的层次、关系和相互影响。这里提供一张盒模型的3D示意图,希望便于你的理解和记忆。

  
margin和padding

  • margin:层的边框以外留的空白
  • background-color:背景颜色
  • background-image:背景图片
  • padding:层的边框到层的内容之间的空白  
  • border:边框  
  • content:内容
padding、margin两个重要属性的详细介绍及举例说明
本文将讲述HTML和CSS的关键—盒子模型(Box model). 理解Box model的关键便是margin和padding属性, 而正确理解这两个属性也是学习用css布局的关键.

: 为什么不翻译margin和padding? 原因一, 在汉语中并没有与之相对应的词语; 原因二: 即使有这样的词语, 由于在编写css代码时, 必须使用margin和padding, 如果我们总用汉语词语代替其来解释的话, 到了实际应用时容易混淆margin和padding的概念.