开发者社区开发与运维文章正文

一张图搞懂盒子模型 margin padding

2024-08-19 21

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 这篇文章通过一张图帮助读者理解CSS中的盒子模型，特别是`margin`和`padding`的概念，解决容易混淆这两个属性的问题。

在这里插入图片描述

文章标签：

前端开发

热爱技术的小郑

瑞崽崽崽

5月前

编解码前端开发

前端知识笔记（十九）———px，em，rem，vw，vh之间的区别

瑞崽崽崽

90 0 0

夏天49597

4月前

前端开发开发者容器

CSS进阶-盒模型调整：box-sizing

【6月更文挑战第14天】`box-sizing`属性在CSS中调整盒模型行为，让元素宽度和高度包含内容、内边距和边框。默认是`content-box`，仅计算内容区，而`border-box`则包含所有。不一致的布局、预期尺寸不符和复杂计算错误是常见问题。使用`* { box-sizing: border-box; }`可简化布局，确保元素尺寸直观一致。了解和正确使用`box-sizing`能提升布局效率和准确性。

夏天49597

85 0 0

HoMeTown

编解码前端开发

【CSS】一文搞懂 em、px、rem、vh、vw 的区别！🔥🔥

前言大家好，我是HoMeTown，今天聊一下CSS中em、px、rem、vh、vw这些单位都有什么区别，什么时候该用什么单位，如何正确使用。

HoMeTown

189 0 0

茶无味的一天

前端开发开发者

怪异盒模型border-box真的“一无是处”吗？

虽然w3c制定了标准盒模型，但在 `box-sizing` 属性中却还是保留了怪异盒模型，可能就是希望开发者在不同的场景中适当地运用，前提是如何理解它。