CSS盒子 margin外边距padding内边距border边框

以前应聘前端工作的时候,考官总喜欢问CSS盒子是什么?其实就是margin外边距和padding内边距,外加一个border边框,换了个神奇的叫法。margin外边距外边距的意思就是,元素向外的距离。代码示例margin:10px;

[时间:08-28]    [浏览:]    [放入收藏夹]    [查看详情]

以前应聘前端工作的时候,考官总喜欢问CSS盒子是什么?其实就是margin外边距和padding内边距,外加一个border边框,换了个神奇的叫法。

margin外边距

外边距的意思就是,元素向外的距离。

代码示例

margin:10px;

CSS盒子 margin外边距padding内边距border边框

文字代表元素本身,黄色代表外边距。

padding内边距

内边距跟外边距相反,元素向内的距离。

代码示例

padding:10px;

CSS盒子 margin外边距padding内边距border边框

内边距也就是上面图片绿色地方,文字自身的宽高会变大。

border边框

给元素添加边框,可选边框样式、边框宽度、边框颜色值,很简单理解。

代码示例

border-width:5px;
border-style:solide;
border-color:red;

高手一般都是简写

border:5px solid red;

  本文转载自:精准像素:11px.cn ,感谢作者分享实用知识


标签: