CSS基础学习：边框及内外边距

内外边距及边框

边框：border

使用边框

方式一

border: 2px solid red; /如果只有左边框：border-left/

方式二

border-style: solid; /如果只有左边框：border-left-style/
border-left-width: 15px; /设置左边框宽度/
border-radius: 5px; /设置圆角/
border-right-color: #ff0000; /右边框颜色/

外边距

为元素不同边设置不同外边距

margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;

简写：margin: 25px 50px 75px 100px; /上、右、下、左/

用auto居中容器中元素

width:300px;
margin: auto;

/可以将 margin 属性设置为 auto 以自动将元素在其容器中水平居中。然后，该元素将占据指定的宽度，剩余空间将在左右外边距之间平均分配/

使用继承值

链接: link.

垂直相邻元素外边距无法叠加，会合并

内边距

使用内边距

padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;

简写：padding: 25px 50px 75px 100px; /上、右、下、左/

内边距改变元素宽度（不设置box-sizing）

链接: link.

内边距和元素宽度（设置box-sizing）

box-sizing 属性允许以特定的方式定义匹配某个区域的特定元素。

例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 “border-box”。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。

示例：
链接: link.