DIV盒子模型：
从外到内依次包括：
margin：外边距、
border：边框、
padding：内补白、
content：内容。
内外距离区别：
其实说白了
padding就是内容与边框的空隙。
margin 则是模块与模块的空隙。
图解：
padding就是内容与边框的空隙。
margin 则是模块与模块的空隙。
图解：
以下是W3C标准的盒子示例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<title>DIV+CSS</title>
<style type="text/css">
.div1{
width:300px;
height:300px;
background:yellow;
border:2px solid red;
padding:10px 20px 30px 40px; /*上、右、下、左 顺序*/
}
#div1{
width:300px;
height:300px;
background:#c09;
border:2px solid yellow;
margin:10px 20px 30px 40px; /*上、右、下、左 顺序*/
}
</style>
</head>
<body>
<!--div的实际宽度为：div宽度+padding宽度*2+border宽度*2+margin宽度*2-->
<div class="div1">DIV内补白padding，距离边框的空隙。会撑开盒子。</div>
<div id="div1">DIV外部边距margin，距离外部元素的空隙（外边距）。</div>
</body>
</html>
相关推荐
H5div盒子模型例子H5div盒子模型例子H5div盒子模型例子H5div盒子模型例子
**CSS+DIV 盒子模型详解** 在网页设计与开发中，CSS（层叠样式表）和DIV元素是构建布局的基础。"CSS+DIV-盒子模型示例.zip"中的内容显然是为了帮助理解CSS中的盒子模型及其应用。盒子模型是CSS布局的核心概念，它将...
"div盒子模型.pdf" 本文主要讲解了 CSS 盒子模型的概念和应用。CSS 盒子模型是指在网页设计中，对 div 元素的布局和样式的控制。它具有四个主要属性：内容（content）、填充（padding）、边框（border）和边界...
下面，我们将深入探讨`DIV`布局的十大技巧以及`DIV`盒子模型。 1. **独立性与可复用性**：`DIV`元素可以独立定义样式，通过类（class）或ID（id）选择器，使得样式可复用，降低代码冗余，提高效率。 2. **层叠顺序...
CSS 盒子模型详解 在网页设计中，我们经常听到的一些属性名，如内容（content）、填充（padding）、边框（border）和边界（margin），这些属性组成了 CSS 盒子模型。这个模型可以被类比到我们日常生活中的盒子上，...
本篇文章将根据“Arry精英战队Div盒子模型Arry老师学习教案”中的内容，深入解析CSS盒子模型的基本概念、组成部分及其应用技巧。 #### 二、CSS盒子模型概述 **CSS盒子模型**是指用于描述HTML元素如何显示并放置到...
本讲座“郜振宇php职业培训系列讲座009：div盒子模型与内外边距精讲”着重讲解了两个核心的CSS概念：盒子模型和内外边距，这对于构建响应式、标准化的网页布局至关重要。 首先，让我们深入理解盒子模型。在Web设计...
Arry精英战队Div盒子模型Arry老师PPT学习教案.pptx
<div class="box2" panerTitle="控制面板" panelHeight="" panelWidth="300" showStatus="收缩" panelUrl=""> panerTitle：box2添加左上角标题，可为随意文本 showStatus：若为“收缩”，即可为可改变显示或者隐藏...
在Web开发中，盒子模型是CSS布局的基础概念之一，它定义了元素框处理元素内容（content）、内边距（padding）、边框（border）和外边距（margin）的方式。了解盒子模型对于设计出适应不同屏幕尺寸和设备的响应式网页...
**DIV CSS 盒子模型详解** 在网页设计中，DIV CSS是构建页面布局的重要工具，而盒子模型（Box Model）则是理解CSS布局的关键概念。这个PPT演讲将深入探讨这一核心知识点，帮助初学者掌握网页设计的基础。 首先，...
单页设计，web样式，HTML.,CSS,DIV盒子模型 网页设计简易仿造安阳师范学院制作的学校介绍页面。单页设计，web样式，HTML.,CSS,DIV盒子模型 网页设计简易仿造安阳师范学院制作的学校介绍页面。单页设计，web样式，...
CSS 盒子模型结构是 div+css 技术的基础组成部分，它主要解决了传统的 table 表格嵌套问题。盒子模型可以看成是网页的一个区块，也可以看成是大区块中的一个“区块元素”。既然是区块，“盒子模型”自然就会占据...
盒子模型 内外边距盒子模型 内外边距盒子模型 内外边距盒子模型 内外边距盒子模型 内外边距
本篇文章将深入解析CSS盒子模型，并通过实例探讨如何使用div布局，帮助你彻底掌握这一核心技术。 首先，我们需要理解CSS盒子模型的基本构成。每个HTML元素在CSS中都被视为一个矩形的“盒子”，它包含四个部分：内容...
网页设计与制作中，"DIV+CSS创建网页-盒子模型介绍"是一个至关重要的主题，它涉及到网页布局的基础理论。盒子模型是理解网页元素如何在页面上占据空间的关键概念。在这个模型中，每个HTML元素都被看作是一个具有内容...
CSS 盒子模型 CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子，在CSS中，”box model”这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际...
### 盒子模型剖析 #### 一、引言 在Web前端开发中，掌握CSS（层叠样式表）是至关重要的技能之一。CSS不仅能够帮助我们美化网页，还能实现复杂多样的布局效果。而在CSS布局中，有一个核心概念——盒子模型（Box ...
其中，CSS盒子模型作为DIV排版的核心组成部分，扮演着至关重要的角色。本文将深入探讨CSS盒子模型的基本概念、工作原理及其实际应用技巧，帮助读者更好地理解和掌握这一关键技术。 #### 二、CSS盒子模型概述 **1. ...
### CSS盒子模型详解 #### 一、引言 在网页设计领域，随着技术的发展和标准的不断演进，越来越多的设计者开始放弃传统的表格排版方式，转而采用更灵活、强大的CSS（层叠样式表）来进行网页布局。这其中，CSS盒子...