第12天 - 16天搞定前端，CSS的边距，内外有别？

多程序员朋友，在用CSS进行边距调整时，老分不清楚外边距margin和内边距padding的区别，在我部门，就有两个迷糊虫。于是我上网找了一幅图，一副不可描述的图(你可不要想歪了)，他们一看就完全明白了，现在分享给你。

12.1 内外抉择

在什么场景中使用padding，在什么场景中使用margin，这是一个学问。你掌握了，学问就有了。

这是用padding的学问

（1）需要在border内侧添加空白，在文字与边框留有距离时；

（2）空白处需要背景色时；

（3）上下相连的两个盒子之间的空白希望等于两者之和时，比如15px+20px的padding，将得到35px的空白。

这是用margin的学问

（1）需要在border外侧添加空白时;

（2）空白处不需要有背景色时;

(3）上下相连的两个盒子之间的空白需要相互抵消时，比如15px+20px的margin，将得到20px的空白。

12.2 内外有别

在CSS中，通过外边距margin属性，可设置元素周围的空间。可用margin统一指定4边，也可用margin-top等属性，特指其中一边。这种方案，在CSS中是很常见的。padding和margin的作用不同，但用法是一样的。为了区分效果，我只在一个div中用了padding，通过比较，一目了然。

在CSS表文件ys2.css中的代码

/*单独指定一个边距*/
.one-margin {
    margin-left: 100px;
}

/*4个边距*/
.four-margin {
    background: cadetblue;
    width: 400px;
    height: 200px;
    margin: 10px 20px 30px 50px;
}

/*加上padding*/
.use-padding {
    background: cadetblue;
    width: 400px;
    height: 200px;
    margin: 10px 20px 30px 50px;
    padding-top: 20px;
}

在HTML文件中的代码

<div class="big-div">
    <h1 class="one-margin">margin用法</h1>
    <div class="four-margin">
        margin一个值：4个边距;<br/>
        margin两个值：上下边距、左右边距;<br/>
        margin三个值：上边距、左右边距、下边距;<br/>
        margin四个值：上边距、右边距、下边距、左边距。
    </div>
    <div class="use-padding">
        padding一个值：4个边距;<br/>
        padding两个值：上下边距、左右边距;<br/>
        padding三个值：上边距、左右边距、下边距;<br/>
        padding四个值：上边距、右边距、下边距、左边距。<br/>
        为了区分margin和margin，我只用 padding-top,你能看出效果么?
    </div>
</div>

输出结果

好了，有关CSS边距的内容，老陈讲完了，如果觉得对你有所帮助，希望老铁能转发点赞，让更多的人看到这篇文章。你的转发和点赞，就是对老陈继续创作和分享最大的鼓励。

一个当了10年技术总监的老家伙，分享多年的编程经验。想学编程的朋友，可关注：老陈说编程。分享Python，前端(小程序)、App和嵌入式方面的干货。关注我，没错的。

#前端##HTML5##CSS##程序员##Web#

天在讲块级元素与行内元素区别的时候，我们有提到margin与padding这两个值，这其实已经涉及到以后会和大家一起讨论的css相关知识了。margin中文是‘边’的意思，在css里面做为‘外边距’的意思。padding中文有‘衬垫，填塞料’的意思，在css里面做为‘内边距’的意思。

外边距，内边距？要了解这两个，我们先说一下什么叫css，css英文全称是cascading style sheets ，中文意思是层叠样式表，它实际上的作用是用于控制html元素在页面上的大小形状，位置，颜色，布局等。通俗一点理解就是相当于在给html元素进行化妆修整一样。外边距和内边距就是属于css的，用来控制html元素的外边距和内边距。margin分上下左右四个值，即margin-top,margin-bottom,margin-left,margin-right四个值。同样padding也是一样，有padding-top,......padding-right四个值。

讲了这么多，我们可能还是不知道margin与padding到底是什么样的。现在就来详细地分享一下，为了更好的理解，在html里面，大家把所有html元素都看做盒子，每一个元素都看做一个盒子，这个也称为css盒子模型。既然是盒子，那么一个盒子如果要和它右边的盒子有个50像素的距离，就可以设置一个margin-right值为50px就行了，这个就是所谓的外边距margin。而padding从中文意思，我们可以理解相当于给这个盒子弄了填塞料，填塞料的厚度就相当于内边距padding的值了。另外提一下，盒子不单有margin和padding，还有一个border值，就是盒子厚度的意思，同样有border-top......border-right上下左右四个值。最后用一个图来看下盒子模型是怎么样的，如下图

解释一下，图中的content指的是盒子里面的内容，即html元素里面包含的内容。今天就讲到这里了，更多内容大家关注点点有我，后面会继续更新。有什么问题也可以留言一起讨论一下哦

)CSS 标准盒子模型(Box Model)

在网页中所有HTML元素可以看作盒子,在CSS中,"box model"术语是用来设计和布局时使用的;CSS盒模型本质上是一个盒子,封装周围的HTML元素包括:外边距(margin)边框(border)内边距(padding)实际内容(content)四个属性,所以布局时每个元素所占的总宽高是这4个属性的总和;比如宽度:总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

1.1Margin(外边距)清除边框外的区域,外边距是透明的

1.2Border(边框)围绕在内边距和内容外的边框

1.3Padding(内边距)清除内容周围的区域,内边距是透明的

1.4Content(内容)盒子里填充的内容比如文本,图像等

标准盒子模型

宽度为100px的div

根据盒子模型得出该元素的总宽度为:100+(20+20)+(15+15)+(15+15)(由里至外)因此如果想在此div中放置一个宽度为100px的元素,此元素的总宽度必须小于等于100px

2)DIV+CSS布局

Div+CSS布局就是将网页内容用<div>分割为块,之后使用css设置每个块的大小,位置等

DIV+CSS布局最重要的是灵活运用float(浮动)属性,其值:1)left 2)right 3)both

clear属性作用是清除浮动,其值为:1)left 2)right 3)both

d2向右浮动 float:right

因为div是块级元素,如果都没有脱离文档流div就会按照从上到下的顺序放置

d2设置为右浮动其他两个div位置的变化:

1)d1没有脱离文档流会占据一行,所以d2只能浮动到d1下面的右面如上图所示

2)d2脱离文档流,d3自动填充到d2的位置

d1,d2全部设置为右浮动

1)当d1,d2都设置为右浮动时:因为css中d1在d2上面先设置,因此d1在右侧,如果d2在d1上面先设置样式,则d2在右侧,d1在左侧,自己测试不再截图

2)当d1,d2都设置为右浮动时:d3就会跑到上图中d2的位置

3)如果3个div都设置左或右浮动,当3个width加一起<=100%就会在第一行显示(d1,d2,d3)

 <style type="text/css">
      #d1 {
      margin: 0px;
      background-color: red;
      padding: 0px;
      width: 50%;
      height: 100px;
      float:right; 
    }
    #d2 {
      margin: 0px;
      background-color: yellow;
      padding: 0px;
      width: 50%;
      height: 100px;
      float:right; 
    }
    #d3 {
      margin: 0px;
      background-color: green;
      padding: 0px;
      width: 50%;
      height: 100px;
    }
  </style>

d2清除左浮动,d3设置为右浮动

当d2清除了左浮动,d3设置为右浮动,就会如上图所示;如果d2清除的是右浮动,d2就会在d1上面,d3就会定位在d1下面的右面,自己测试不再截图

当d2清除了左浮动,如果想要d2紧挨着d1(与d1在一行上),可以通过position脱离文档流设置其上下左右属性使其定位在d1右侧,自己测试

<!DOCTYPE html
  PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>div+CSS布局</title>
  <style type="text/css">
      #d1 {
      margin: 0px;
      background-color: red;
      padding: 0px;
      width: 30%;
      height: 100px;
      float:left; 
    }
    #d2 {
      margin: 0px;
      background-color: yellow;
      padding: 0px;
      width: 40%;
      height: 100px;
      clear: left;     
    }
    #d3 {
      margin: 0px;
      background-color: green;
      padding: 0px;
      width: 30%;
      height: 100px; 
      float: right; 
    }
  </style>
</head>
<body>
    <div id="d1"><span style="font-size: 50px;">d1</span></div>
    <div id="d2"><span style="font-size: 50px;">d2</span></div>
    <div id="d3"><span style="font-size: 50px;">d3</span></div>
  </body>
</html>

DIV+CSS布局综合运用position+上下左右属性与float属性为网页进行布局

注意:浏览器的兼容性问题,特别是使用IE内核的浏览器对W3C的规范不怎么遵守

在线咨询

上一篇：html网页基本组成结构（DOM节点、元素、属性和文本）
下一篇：WordPress生成HTML静态化网站

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

第12天 - 16天搞定前端，CSS的边距，内外有别？

12.1 内外抉择

12.2 内外有别

您的项目需求