CSS Box Model

Table of Contents

The CSS box model specifies how margins, borders and padding of HTML elements are rendered.

The CSS Box Model Visualized

The CSS box model looks like this:

Each HTML element rendered is considered to be a box. The box has four parts (or layers).

  1. Margin: The outermost part is the margin between this HTML element to other HTML elements.
  2. Border: The second part is the border. The border sits inside the margin, and surrounds the padding and content of the HTML element.
  3. Padding: The third part is the padding. The padding sits inside the border and surrounds the content of the HTML element.
  4. Content: The fourth part is the content. The content of an HTML element is whatever is displayed inside the HTML element. This is typically a combination of text, images and other HTML elements.

The margin, border and padding can be controlled via CSS properties. Each of these properties are explained in these texts:

The content box can have its width and height set. You can also specify what happens if the content inside the content box is too large to fit inside the content box.

width and height

You control the width and height of an HTML element box using the width and height CSS properties. Width and height can be specified using any of the standard CSS units. Here is an example:

#theDiv {
    width  : 300px;
    height : 200px;
}

This CSS rule sets the width to 300 pixels and height to 200 pixels of the HTML element with the id theDiv.

The width and height CSS properties sets the width and height of the content box of an HTML element. That means, that the full width and height taken up by the HTML element may be larger. To width and height you have to add the size of padding, borders and margins.

total width  = width  + margin-left + margin-right
                      + border-left-width + border-right-width
                      + padding-left + padding-right

total height = height + margin-top + margin-bottom
                      + border-top-width + border-bottom-width
                      + padding-top + padding-bottom

If an HTML element has a padding of 5 pixels, border of 1 pixel and a margin of 10 pixels (all on all sides), then the total width and height of the HTML element will be:

total width  = width  + 10 + 10 + 1 + 1 + 5 + 5 = width  + 32
total height = height + 10 + 10 + 1 + 1 + 5 + 5 = height + 32

box-sizing

You can change how the browsers calculate the size of the HTML element with the box-sizing CSS property. The box-sizing CSS property is new in CSS 3.0.

In Firefox you will have to use the -moz- prefix, so the property is called -moz-box-sizing. Just set both properties box-sizing and -moz-box-sizing to the same value, to make this work in both IE, Chrome and Firefox.

The box-sizing property can take these values:

  • content-box
  • border-box
  • inherit

The content-box value is the default value. This makes the width and height CSS properties set the width and height of the content box alone.

The inherit value means that the HTML element inherits the value of this CSS property from its parent HTML element.

The border-box value makes the browser interpret the width and height CSS properties as the width and height of the border box. The border box is everything inside the borders of the HTML element, including the border itself.

When using box-sizing : border-box the width and height of the content box will then be calculated as:

content-box-width  = border-box-width  - border-width  - padding width
content-box-height = border-box-height - border-height - padding height

If an HTML element has a width of 200, height of 180, padding of 5 pixels and a border of 1 pixel (all on all sides), then the content box width and height will be:

content-box-width  = 200  - (2 * 1) - (2 * 5) = 200 - 2 - 10  = 188
content-box-height = 180  - (2 * 1) - (2 * 5) = 180 - 2 - 10  = 168

The HTML will take up 200 x 180 pixels (plus margins too, if the element has any) which was set by the width andheight CSS properties. The content box will only take up 188 x 168 pixels because the border and padding is subtracted from the width and height of the border box, to get the width and height of the content box.

时间: 2024-11-05 02:32:43

CSS Box Model的相关文章

CSS Box Model(盒子模型)

CSS Box Model(盒子模型) 一.简介 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容. 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素. 下面的图片说明了盒子模型(Box Model): 不同部分的说明: Margin(外边距) - 清除边框外的区域,外边距是透明的. Border(边框) - 围绕在内边距和内容外的边框.

CSS Box Model 盒子模型

1. 介绍 1.1 什么是 Box Model 在HTML中的每个element(元素)都可以看作一个矩形的盒子,矩形从内到外依次由元素的内容(content).内边距(padding).边框(border).外边距(margin)组成. 在CSS的布局中,元素的矩形被称为"Box Model",即盒子模型.在浏览器渲染页面时,盒子模型决定了元素的大小和位置. 1.2 组成结构 以Chrome浏览器中盒子模型为例: content:内容区域:文本.图片出现的位置.CSS中的width.

CSS 框模型(Box model)简介

页面是有元构成的,行内元素(span,img,a)可以放置在一行,而块级元素(div,p)独占一行. 页面上的每个元素都形成了一个矩形区域,这个区域被称为 box.   Box model Box model 是以CSS的角度去看一个元素被渲染后的抽象形态:是讲一个元素自身的构成部分,不同于布局:多个元素在页面上的定位.box model 分为4部分: content area,padding,border 和 margin. content area(内容区域):元素的实际内容,如文本,图片或

CSS盒模型(Box Model)

阅读目录 1. 什么是CSS盒模型 2. IE盒模型和W3C盒模型 3. CSS3属性box-sizing 4. 关于盒模型的使用 在最初接触CSS的时候,对于CSS盒模型的不了解,撞了很多次的南墙呀.盒模型是网页布局的基础,它制定了元素如何在页面中显示,如果足够地掌握,那使用CSS布局那将会容易得多. 1. 什么是CSS盒模型 盒模型,顾名思义,就是一个盒子.生活中的盒子,有长宽高,盒子本身也有厚度,可以用来装东西.页面上的盒模型我们可以理解为,从盒子顶部俯视所得的一个平面图,盒子里装的东西,

CSS 框模型(Box Model)

CSS 框模型(Box Model) 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容. 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素. 下面的图片说明了框模型(Box Model): 不同部分的说明: Margin - 清除边框区域.Margin没有背景颜色,它是完全透明 Border - 边框周围的填充和内容.边框是受到盒子的背景颜

CSS的盒子模型(Box Model)

盒子模型(Box Model)是 CSS 的核心,现代 Web 布局设计简单说就是一堆盒子的排列与嵌套,掌握了盒子模型与它们的摆放控制,会发现再复杂的页面也不过如此. 然而,任何美好的事物都有缺憾,盒子模型有两种不同的诠释,一种来自 IE6,一种来自W3C 标准浏览器. 盒子模型 下图就是一个典型的盒子模型示意图在内容区外面,依次围绕着 padding 区,border 区,margin 区,这一模型结构在所有主流浏览器都是一致的. 通过盒子模型,我们可以为我们的内容设置边界,留白以及边距,盒子

Kidney自得其乐版CSS教程 Chapter2 Box Model

Chapter 2 Box Model Version Update Note 1.0 2016-5-31 首次添加.欢迎在评论中指出错误,一经核实,立即修订,且注明贡献者. 1.元素的分类        1.1 替换元素 替换元素就是替身元素,它替别人占个位,它不是普通的标签,它代表某种元件. 例如:<img> <source><input><embed>……        1.2 非替换元素 大部分元素都是非替换元素. 从形式上看非替换元素是一对标签,替

Opening the box Model

How Are Elements Displayed? Every element has a default display property value, Things get interesting with the inline-block value. Using this value will allow an element to behave as a block-level element, accepting all box model properties (which w

盒子模型(Box Model)

盒子模型(Box Model) ■ 盒子模型--概念 在网页设计中常用的属性名:内容(content),填充(padding),边框(border),边界(margin),CSS 盒子模式都具备这些属性. 细节说明: ?html 元素都可以看成一个盒子 ?盒子模型的参照物不一样,则使用的 css 属性不一样.比如:从 div1 的角度看,是 margin-right,从 div2 看,则是 margin-left. ?如果你不希望破坏外观,则尽量使用 margin 布局,因为 padding 可