关于盒模型的外边距padding和内边距margin

边框border属性值  solid实线   dashed虚线   dotted点线   double双实线

/* 内边距 */
padding:20px 30px 30px 30px;若有四个值代表  上/右/下/左 
padding: 10px 20px 30ox;三个值代表 上、左右、下 
padding: 10px 20px;两个值代表  上下/左右 
padding: 10px;一个值代表四个方向一致

/* 外边距 */

margin:20px 30px 30px 30px;若有四个值代表  上/右/下/左 
margin: 10px 20px 30ox;三个值代表 上、左右、下 
margin: 10px 20px;两个值代表  上下/左右 
margin: 10px;一个值代表四个方向一致

此外,外边距(margin)垂直方向会叠加

叠加的规则:
1、同为正数,取最大
2、同为负数,取绝对值最大
3、一正一负 取和

盒子模型的宽度:width+padding+border
盒模型的组成:width+padding+border+height
盒模型的高度:height+padding+border

原文地址:https://www.cnblogs.com/maleijiejie/p/12305012.html

时间: 2024-10-29 00:00:39

关于盒模型的外边距padding和内边距margin的相关文章

10-[CSS]-盒模型:border,padding,margin

1.CSS盒子模型 HTML文档中的每个元素都被描绘成矩形盒子,这些矩形盒子通过一个模型来描述其占用空间,这个模型称为盒子模型. 盒子模型通过四个边界来描述:margin(外边距),border(边框),padding(内填充),content(内容区域),如图所示: <!-- 盒模型: 在网页中 基本上都会显示一些方方正正的盒子,这种盒子就被我们称为盒模型 重要的属性: width,height,padding,border, margin width: 指的是内容的宽度,而不是整个盒子真实的

标准盒模型与IE盒模型

1. 盒模型的组成 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用.CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容.盒模型允许我们在其它元素和周围元素边框之间的空间放置元素. 盒模型是CSS中一个重要概念,文档中的每个元素被描绘为矩形盒子.渲染引擎的目的就是判定大小,属性.盒模型属性有: margin:外边距 padding:内边距 border:边框 content:内容 2. 标准盒模型 标

使用盒模型

一.盒模型 盒子是css中的基础概念,可见元素会在页面中占据一个矩形区域,这个区域就是元素的盒子.我们需要使用它来配置元素的外观以及文档的整体布局. 二.使用盒模型 1.为元素应用内边距 应用内边距会在元素的内容和空间之间添加空白. 属性 说明 属性值 padding-top 设置元素的上内边距 长度值或者百分比 padding-right 设置元素的左内边距 长度值或者百分比 padding-bottom 设置元素的下内边距 长度值或者百分比 padding-left 设置元素的左内边距 长度

CSS之盒模型边框,内边距,外边距,阴影,圆角

盒子模型 盒子模型 盒子模型有元素内容.边框(border).内边距(padding).外边距(margin)组成: 盒子里面的文字和图片等元素是内容区域: 盒子的厚度 我们称为 盒子的边框: 盒子内容与盒子之间的距离是内边距: 盒子与盒子之间的距离是外边距: 标准盒子模型 盒子边框(border) border: border-width || border-style || border-color 属性 作用 border-width 定义边框粗细,单位是 px border-style

padding标准盒模型和怪异盒子模型

我们都知道padding是为块级元素设置内边距 但是在使用过程中,我们却会遇到一些问题.padding的标准盒模型和怪异盒模型 padding盒子模型 我们通过demo来讲这个问题,用文字干讲第一没意思,第二讲不明白 标准盒模型: 我们先摆出HTML和CSS代码: 1 <div class="shoebox"> <!--此div模仿鞋子的鞋盒--> 2 <div class="shoes"> <!--此div模仿鞋子--&g

css的盒模型,及css3的box-sizing新属性

css的盒模型包含了content(元素自身).padding(内边距).border(边框)及margin(外边距). 如图,浏览器控制台elements的computed可以清晰显示元素盒模型,鼠标多动动就明白了:(蓝色区域表示content元素自身,这里是整个窗口的内容) 盒模型有两种:标准模式和怪异模式.在<!DOCTYPE>声明缺失时就会在ie6.ie7.ie8下触发怪异模式 标准模式下:盒子总宽度/高度 = content + padding + border + margin,c

CSS盒模型简单用法

1.盒模型 margin:外边距: margin-top /margin-right/margin-bottom/margin-left; 或者 margin:top right bottomleft; border:边框:border-top /border-right/border-bottom/border-left; 或者 border:top right bottomleft; padding:内边距:padding-top /padding-right/padding-bottom/

CSS 盒模型

CSS盒模型也叫框模型,具备内容(content).内边距(padding).边框(border).外边距(margin)这些属性.在CSS中,每一个元素都被视为一个框,而每个框都有三个属性: border:元素的边框(可能不可见),用于将框的边缘与其他框分开: margin:外边距,表示框的边缘与相邻框之间的距离: padding:内边距,表示框内容和边框之间的空间. 盒模型的结构如下图所示: 由上图可以看出,width和height指的是内容区域的宽度和高度.增加内边距.边框和外边距不会影响

盒模型的三大类简介

盒模型包括外边距(Margin).内边距(padding)和边框(border)三大部分. Margin:包括{ margin-top//上边距    margin-right//右边距    margin-bottom//下边距    margin-left//左边距 } Padding:包括{       padding-top//上内边距    padding-right//右内边距    padding-bottom//下内边距    padding-left//左内边距  } bord