网站制作前端代码中的padding和margin有什么区别

不同于十几年前用table进行网页布局，现在网站制作基本上基于div+css，margin和padding作为两大基本元素块，会被经常使用到。作为一名网站设计师或者网站前端工程师，如果你仍旧不太清楚padding和margin之间的区别，这并不稀奇。这是一个常见的问题，已经困扰了许多网站建设工作人员。这也是我们写作本文的目的，通过简单的示范和讲解，让你明白网站制作前端代码中的padding和margin有什么区别，以及如何区分和使用两者。

Margin和padding可能会混淆新手的网页设计师，有时甚至是更有经验的网站制作前端工程师。毕竟，在某些方面，它们看起来是一样的：图像或物体周围的Margin。

padding仅仅是边界和实际图像或单元格内容之间的边界内的空间。在图像中，padding是内容周围的黄色区域。请注意，padding完全围绕着内容。你会发现padding在顶部，底部，右侧和左侧。另一方面，边距是边界之外、边界和此对象旁边的其他元素之间的空间。在图像中，边距是整个对象外部的WIE区域。请注意，与padding一样，页边距完全围绕内容。顶部、底部、右侧和左侧有边距。

请记住，如果您计划使用边距和padding功能来实现真正的高级功能，则需要注意某些浏览器(如Internet Explorer)没有正确地实现Box模型。这意味着您的页面在其他浏览器中看起来会不同(有时会非常不同)。