css内边距外边距和边框

关于css内边距外边距和边框的一些介绍

1、margin 外边距

是指相邻同辈元素之间的距离。

相邻元素块的margin叠加显示

如上图所示两个元素块的margin值都设置为50px。

2、padding 内边距

定义元素边框与元素内容之间的距离。

上图盒子的宽200px，高200px；内边距为50px；边框为0px。

3、border 边框

边框样式定义要显示怎样一个元素边界。

上图盒子宽200px，高200px；内边距为0px；边框大小为20px。

4、关于盒子大小的描述

一个div盒子的宽=左边框宽度+左内边距宽度+内容宽度+右内边距宽度+右边框宽度。

(width of box= border-left + padding-left + width + padding-right + border-right;)

一个div盒子的高=上边框高度+上内边距高度+内容高度+下内边距高度+下边框宽度。

(height of box= bordr-top + padding-top + height + pading-bottom + border-bottom;)

因此，对于一个仅仅只设置了宽度和高度的盒子，盒子的大小就是盒子的宽度和高度。如果盒子还设置了padding值，那么盒子

就会变大。因此如果想要设计一个宽度和高度固定的盒子，那么在给这个盒子加上padding和border属性时，要重新计算盒子大小是否还是

想要的大小。

例如：我想要一个宽度为200px，高度为200px的盒子。那么可以写代码如下（仅显示关键代码）

  div {width:200px;height:200px;background:red;}

如果我想要设置padding值为20px，可以这样写(为了不使盒子变大，应当减少盒子内容区域的宽度和高度)：

    div {width:160px;height:160px;padding:20px;background:red;}

如果我还想设置border的值为5px，在不改变盒子大小的前提下，可以这样写；

  div {width:150px;height:150px;padding:20px;border:5px;background:red;}

css内边距外边距和边框相关推荐

CSS学习之外边距合并
外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距. 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者. 外边距合并外边距合并(叠加)是一个相当简单的概念.但是,在实践中对网 ...
html定义盒子距离顶底端像素,css - 盒子内外边距
css - 边距元素内边距内边距是指元素包含的内容离元素边框之间的间距,内边距不能设负值.内边距(padding).(边框)border都会撑大盒子,在浏览器中显示的元素的尺寸可能包含了盒子的pa ...
css怎样清除外边距,CSS 外边距
CSS 外边距围绕在元素边框的空白区域是外边距.设置外边距会在元素外创建额外的"空白". 设置外边距的最简单的方法就是使用 margin 属性,这个属性接受任何长度单位.百分数值 ...
CSS中的边框与内边距外边距
边框的三个方面(webkit.firefox和ie) border-width,边框的宽度 border-color,边框的颜色 border-style,边框的样式(border-style:dot ...
css特性:空白外边距互相叠加
空白双边距是一个极容易误解的CSS特性.它不是CSS的bug,但如果我们一旦误解,将会给你带来很多麻烦. 先看如下demo代码: <!doctype html> <html> ...
CSS - 盒子模型 - 外边距
文章目录一.外边距属性二.margin的简写方式三.外边距可以让块级盒子水平居中四.行内元素和行内块元素水平居中五.外边距合并相邻块元素垂直外边距的合并六.嵌套块元素垂直外边距的塌陷 ...
11.前端笔记-CSS盒子模型-外边距margin
1.margin 1.1 margin的语法盒子与盒子之间的距离 <!DOCTYPE html> <html lang="en"> <head> ...
html改变元素外边距,CSS 简明教程 - 外边距 ( margin ) 属性
CSS margin 属性用于在 HTML 元素周围创建「空白」,这些空白在元素的边框之外创建我们可以单独设置元素的上边距,下边距,左边距和右边距,也可以使用 margin 属性同时设置所有边 ...
CSS margin（外边距）
margin margin清除周围(外边框)元素区域.margin没有背景颜色,是完全透明的. margin可以单独改变元素的上,下,左,右边距,也可以一次改版所有属性. 可能的值值说明 auto ...

css内边距外边距和边框

css内边距外边距和边框相关推荐

最新文章

热门文章