边距和填充的常见类
我已经在 css 中为公共边距和填充类声明了公共 css 类，这样我就可以使用它们，而无需使其他 css 声明过于具体。
例如：
.padTB5{padding:5px 0;}
.pad10{padding:10px;}
.mTop10{margin:10px 0 0;}
.mTop5{margin:5px 0 0;}
- 这个方法对吗？
- 如果不是那么为什么？
- 如果是，那么边距和填充哪个更好？ （我知道浏览器的边距问题）
请指导...提前致谢:)
I have declared common css classes for common margin and padding classes in my css so that i can use them without making other css declarations too specific.
For example :
.padTB5{padding:5px 0;}
.pad10{padding:10px;}
.mTop10{margin:10px 0 0;}
.mTop5{margin:5px 0 0;}
- Is this method right??
- If not then why?
- If yes then which is better margin or padding? (I know margin issues with browsers)
Please guide... thanks in advance :)
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
这是不好的做法，因为类应该是语义的 - 也就是说它们应该描述您正在设计的事物的类型。例如“blog-header”、“primary-this”、“secondary-that”等。
在实践中，使用您所描述的类的缺点是，如果您的视觉设计发生变化并且您需要不同大小的边距或填充，那么您还需要更改类名 - 这意味着 CSS 和 HTML 都会更改。或者，如果您只是更改 CSS，那么类名称将不再描述它们的用途。这种方法并不比使用内联样式好多少。
边距和内边距是不同的东西，并且以不同的方式表现。在某些情况下，边距可能会折叠，而填充则不会。填充将包括背景图像或颜色，而边距则不包括。边框将显示在内边距和边距之间。
This is bad practice as classes should be semantic - that is they should describe the type of thing you are styling. For example "blog-header", "primary-this", "secondary-that" etc.
In practice, the downside to using classes as you describe is that if your visual design changes and you need different sized margins or padding, then you will need to change the class names too - which means changes to both the CSS and HTML. Or if you just change the CSS then the class names no longer describe what they're for. This approach is not much better than using inline styles.
Margins and padding are different things and behave in different ways. Margins can collapse in certain circumstances whereas padding doesn't. Padding will include background images or colours whereas margin doesn't. Borders will display between padding and margin.
在我看来，这不是最佳的，除非你做得正确。
在你的标记中，你现在有这样的东西：
并且你的网站上到处都是这样的。
如果您想更改 CSS 以增加一点额外的边距/填充该怎么办？
哦。这些类名看起来不再那么明智了：您必须忍受错误命名的选择器，或者在所有文件中进行查找和替换。
如果您决定某些带有
.pad10的元素需要使用红色文本怎么办？现在类名就更没有意义了。
如果您还向 HTML 中的每个元素应用相关的（语义上有意义的）类/id，那么执行此类操作可能会很好：
因为这样，至少您可以执行以下操作：
In my opinion, this is not optimal, unless you do it right.
In your markup, you now have something like this:
and you have that all over your site.
What if you want to change your CSS to have a little extra margin/padding?
Oh. Those class names aren't looking so sensible anymore: you have to either put up with wrongly named selectors, or go Find and Replace in all your files.
What if you decide that some elements with
.pad10need to have red text?Now the class name makes even less sense.
It might be alright to do this type of thing if you also apply a relevant (semantically sensical) class/id to each element in your HTML:
because that way, at least you can do:
你不应该这样做。不建议将类命名为
left或margintop20。您应该使用content或sidebarBox等描述内容的类。假设您要将顶部边距从 10px 更改为 1em。使用您的方法
这些都不好。
有关此内容，请参阅 w3.org goodclassnames。
另请参阅 w3.org 有关盒子模型的内容 了解边距、填充。
You shouldn't do that. Naming classes like
leftormargintop20is unadvised. You should use classes likecontentorsidebarBox, that describe the content.Let's say you want to change the margin-top from 10px to 1em. Using your method either
None of this is good.
See w3.org goodclassnames about this.
Also see w3.org about box model for margin, padding.
边距与填充不同。 margin 是盒子外面的空间，padding 是盒子里面的空间。边距和填充都是跨浏览器兼容的。您的声明是正确的，尽管不建议为边距或填充创建类。对此的一个很好的用途是为圆角或阴影创建一个类，您可以在其中通过指定圆角类来快速应用圆角。
Margin is different then padding. Margin is the space out side the box, padding is the space inside the box. Both margin and padding are cross browser compatible. Your declarations are correct although it is not a recommended practice to create classes for margins or padding. One good use to this is creating a class for rounded corners or shadows, where you can quickly apply round corners by specifying the round corner class.