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

发布时间：2024-01-05  栏目：建站知识   浏览：   分类：css教程 CSS语法

CSS盒子模型包括margin外边距、padding内边距和border边框。margin是元素外部与其他元素之间的空白区域，用于设置元素之间的距离。padding是元素内部的内容与边框之间的空白区域，用于设置内容与边框的距离。border是围绕在元素内容和内边距周围的线，用于设置元素的边界。这三个属性共同构成了一个CSS盒子模型，它们可以控制元素在页面上的布局和样式。通过调整这些属性的值，可以实现对网页元素的精确控制，使页面更加美观和易于阅读。

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

margin外边距

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

代码示例

margin:10px;

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

padding内边距

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

代码示例

padding:10px;

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

border边框

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

代码示例

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

高手一般都是简写

border:5pxsolidred;

相关专题