border和margin(borders什么意思啊)

css（四）padding、margin、border

css（二） 一些基本概念 提到了盒子，替换元素里讲了一下content，这边我们来聊一聊剩下的三个盒子

padding内间距，他是4个盒子中最温和的，基本不会出现什么反认知的现象。

说几个比较有意思的使用。

第一个直接用了padding，分隔符高度会比较高，第二个是通过伪元素+padding，可以实现分隔符长短的控制

margin负责外间距，通常块与块之间都会通过margin来分隔一下，虽然同样都是负责间距，相比于padding，margin就不太温和了，特异之处不少。

和 padding 属性一样，margin 的百分比值无论是水平方向还是垂直方向都是相对于宽度计算的。

首先，margin是支持负值的，这其实还是比较好理解的。

在这，margin在某些情况下是可以改变元素尺寸的，之前说盒子的时候提到过，box-sizing有两种，border-box和content-box，都是不包含margin的，那么margin是如何改变元素尺寸的呢。

如下图负的margin-left或者margin-right都会使子元素宽度变大。

在开发过程中或多或少应该都有过margin合并的经历，只是当时还不知道是啥原因，也不知道margin合并这个词，这不是个bug，而是故意这么设计的。margin合并有三种情况：

给子元素设置margin-top时，一开始是没有任何变化的，直到12px时才有变化，但不是子元素离父元素顶部具体增加，而是父元素离上面的margin距离增加。这边就有父子margin合并和相邻兄弟元素margin合并。

一般感觉我给子元素设置margin-top，那么应该是子元素距离父元素更远，但因为父子margin合并，导致效果是父元素具体上面的元素更远。如果不希望合并发生，有几种解决方法(以下是针对父元素和第一个子元素margin-top合并的解决方式，父元素和最后一个子元素margin-bottom合并的解决方式同理)：

相邻兄弟元素合并与父子(第一个子/最后一个子)合并

父元素设置overflow: hidden，父子的margin合并现象就消失了

空块级元素的 margin 合并：

margin:auto 的填充规则如下。

绝对定位可以实现水平垂直居中

hover时只要改color，就可以把border颜色一起改变

除了作为边框，border也有一些妙用

另：margin+padding 可以实现等高布局，border 属性也可以实现等高布局。

图片标签中border 、 margin、 cursor、 w-resize、 albums各是什么?

border是指图片的边框；

margin是指图片的外边距

cursor是指鼠标指针的形状；

w-resize，应该是resize吧，尺寸大小调整；

albums相册的意思。

如何区分padding margin border 和分辨？

你好！我就按照我个人的笨方法跟你解释一下。

padding：是框内的间距设置，比如你的宽高都是100像素，如值设置为10，那它的宽高度还是100像素，不过放置的内容宽高为80像素，内容已经压缩掉了。

margin：是框外的间距设置，宽高都是100像素，值设置为10，宽度这时会变成120像素，放置内容宽高还是100像素，内容容量不变。

broder：是边框线设置，默认的框是无色的，你可以直接用这属性来设置边框线及色彩，细线边框可以设置为1px #000 solid，这说明设置了一个颜色为黑色的细线边框。

希望我这样的回能令你满意！

Margin，Border，Padding属性的区别和联系

margin 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。

这个简写属性设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度。

块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值，不过使用时要小心。

注释：允许使用负值。

border 简写属性在一个声明设置所有的边框属性。

可以按顺序设置如下属性：

border-width边框宽度；

border-style边框样式；

border-color边框颜色。

padding 简写属性在一个声明中设置所有内边距属性。

这个简写属性设置元素所有内边距的宽度，或者设置各边上内边距的宽度。行内非替换元素上设置的内边距不会影响行高计算；因此，如果一个元素既有内边距又有背景，从视觉上看可能会延伸到其他行，有可能还会与其他内容重叠。元素的背景会延伸穿过内边距。不允许指定负边距值。

注释：不允许使用负值。

verge,margin,fringe,border作为边缘的意思时,有什么区别?

margin表示相对外面的边距（从边框到外面另一个元素的距离）,border表示边框.

教你如何快速理解Margin、Border、Padding、Content

正常教材上关于CSS中padding、border、margin这三种边框的解释，新手在刚开始接触的时候会发现，字都认识，但是理解起来还是有点困难。那今天就通过一个形象的例子，教大家如何理解这几个边框。

首先，我们可以把DIV这个块级元素，想象成一个盒子

这样理解是不是清晰了很多？

下面举一个实际的应用作为例子。

最里面的虚线包围的内容就是CONTENT,

CONTENT到边框Border的距离就是Padding,

边框以外的就是Margin了。

图上的虚线可以当做不存在，可以方便你理解。

怎么样？你理解了吗？