一张图搞懂盒子模型 margin padding
2024-08-19
29
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《
阿里云开发者社区用户服务协议》和
《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写
侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
这篇文章通过一张图帮助读者理解CSS中的盒子模型，特别是`margin`和`padding`的概念，解决容易混淆这两个属性的问题。
目录
相关文章
|
7月前
|
编解码
前端开发
|
2月前
|
前端开发
前端：行内元素的 margin 和 padding
在前端开发中，行内元素的处理是至关重要的。行内元素默认与其他元素在同一行显示，不会占据独立的空间。对于行内元素而言，其外边距（margin）和内边距（padding）的设置有特定规则：垂直方向上的外边距和内边距不会影响其他元素，但水平方向的则会增加元素的宽度，可能会影响相邻元素的位置。合理设置这些属性，可以有效控制页面布局与间距。
87
2
2
|
3月前
|
前端开发
数据可视化
容器
前端基础(十六)_BFC、box-shadow（盒子阴影）、text-shadow（文字阴影）
本文介绍了前端开发中块级格式化上下文（BFC）的概念和作用，以及如何创建BFC。同时，文章还讲解了`box-shadow`和`text-shadow`属性的用法，包括如何为元素添加阴影效果，并通过示例代码展示了这些属性的具体应用。
37
0
0
|
2月前
|
前端开发
小程序
JavaScript
|
6月前
|
前端开发
开发者
容器
CSS进阶-盒模型调整：box-sizing
【6月更文挑战第14天】`box-sizing`属性在CSS中调整盒模型行为，让元素宽度和高度包含内容、内边距和边框。默认是`content-box`，仅计算内容区，而`border-box`则包含所有。不一致的布局、预期尺寸不符和复杂计算错误是常见问题。使用`* { box-sizing: border-box; }`可简化布局，确保元素尺寸直观一致。了解和正确使用`box-sizing`能提升布局效率和准确性。
113
0
0
|
前端开发
开发者
怪异盒模型border-box真的“一无是处”吗？
虽然w3c制定了标准盒模型，但在 `box-sizing` 属性中却还是保留了怪异盒模型，可能就是希望开发者在不同的场景中适当地运用，前提是如何理解它。
141
0
0
|
前端开发
web前端学习（二十）——CSS3外边距属性（margin）及填充属性（padding）的相关设置
web前端学习（二十）——CSS3外边距属性（margin）及填充属性（padding）的相关设置
281
0
0
|
前端开发
web前端学习（十九）——CSS3盒子模型（Box Model）、边框属性（border）及轮廓属性（outline）的相关设置
web前端学习（十九）——CSS3盒子模型（Box Model）、边框属性（border）及轮廓属性（outline）的相关设置
353
0
0
web中盒子模型的“外边距合并”与“margin-top塌陷问题”
外边距合并
盒子模型在嵌套的情况下，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
235
0
0
