chevron_left

CSS 教程
免费
第 2.1 回

教程文档

CSS 教程 - CSS 的框模型 (div) 与边距（margin、padding）

2023年11月23日
CSS 教程

CSS 的框模型 (div) 与边距（margin、padding）

所谓框模型，例如 div 标签，你就可以直接把它理解成一个相框。

这个相框里面的相片有高度和宽度，框本身也有一定的宽度。相框和别的相框之间，还有一定的边距。

div 设置常见属性

border：边框

padding：内边距

margin：外边距

1.png

  1. 图上的 element，就是相片。
  2. padding 就是相片与相框的间距。
  3. border 就是相框本身的宽度。
  4. margin 就是这个相框和别的相框之间的间距。

2.png

注意看此图，元素本身的宽度是 70px，加上左右两边各 5px 的内边距，再加上左右两边各 10px 的外边距。

这个 div 的实际宽度就达到 100px 了。

这一点要注意，设置 div 的宽度，其实只设置了里面元素的宽...

请登录后查看更多expand_more

课程介绍

层叠样式表 (英文全称：Cascading Style Sheets) 是一种用来表现 HTML（标准通用标记语言的一个应用）或 XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS 不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

目录

适合这样的人

新生

授课老师