Day13 CSS基础设定_3
今天我们要来介绍有关CSS排版，方块的概念，之前的文章有提到过，网页就像很多不同的方块组合而成，这样解释或许有点难懂，但接下来我们会实际带你来看。
margin 和 padding
这两项是CSS中很常会设定到的属性，而他是用来干嘛的呢?
margin:和外面四周间距。
首先我们建立两个长宽各100px，颜色是红色的方块。
<style>
div{
width: 100px;
height: 100px;
background-color:red ;
}
</style>
<body>
<div>
</div>
<div>
</div>
</body>
这时候我们发现虽然是两个方块，但是他们之间黏在一起，所以看起来像一个长方形，这时候我们就可以利用margin分开他们。在style里添加这行
margin: 10px;
这时候就会发现它们中间有了10px的距离，但其实不只有中间，而是离左边、右边、下面都有了10px的距离。因为margin没有改变属性时，预设就是四个方位(上、下、左、右)都增加你所设定的单位距离。当然你也可以透过单一去调整。
margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px;
margin-right: 10px;
你也可以透过这样调整!两种方式都会的话十分方便喔，如果你还是不太懂，可以看看这张图。
padding:和里面四边间距。
首先我们建立一个长宽各250px的方块，里面有文字内容。
<style>
div{
width: 250px;
height: 250px;
background-color:red ;
}
</style>
<body>
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Est cum amet voluptatibus molestiae enim aut consequatur facilis deleniti provident accusamus aliquam temporibus officia impedit qui perspiciatis, distinctio ex quod repellendus. Hic laborum fugit delectus atque, dolor voluptatum odio quas quos, asperiores doloremque, maiores dolores nulla labore exercitationem nesciunt iusto autem culpa. Beatae quia asperiores vel minus! Fugit neque enim et?</p>
</div>
</body>
结果会长这样，但不觉得文字跟旁边的方框很挤吗，这时候我们就要使用padding。
padding: 50px;
这时候看起来是不是就舒服多了呢!但要注意一点，你在设定宽高的时候，因为你设定了padding:50px ，所以你原本设定的250px的方框，也会因为你加的padding而增加宽高，左右上下各增加50px。变成宽高350的一个方框。
另外，padding也如同margin，可以对单一方向做调整。
padding-left: 50px;
padding-top: 50px;
padding-right: 50px;
padding-bottom: 50px;
经过上面的介绍，了解margin跟padding了吗!
>>: [机派X] Day 15 - 把你扳直！来校正飞行控制器吧！
Day 29 QuickSight 连接 Redshift - Part 2
在设定完相关的环境参数後，可以开始设定 Redshift 的连接 一样先到 QuickSight 的...
Day 29 - 这一年多来的开发问题解析心得分享
今天讨论的主题是关於开发的过程中，问题要怎麽去思考和解决的小技巧，这些内容对於刚开始学习程序或者是新...
Ruby on Rails ⾃订验证器 Validator
现有的验证器不够⽤吗？有几种⽅式可以⾃订验证器： 写⼀个⽅法，挂到 validate ⽅法上： cl...
【D17】制作讯号灯#2：三大法人期货留仓与大盘的关系
前言 初步推算出大盘与台积电有很大的正相关，然後看看资金雄厚，影响市场非常大的三大法人，哪些东西可以...
Day05 - Artisan 指令列
介绍 Artisan 是 Laravel 里的指令列介面名称，当开发应用程序时，它提供了许多有用的指...