边距和填充的常用类

Question

我已经在我的css中为公共边距和填充类声明了常见的css类,这样我就可以使用它们而不会使其他css声明过于具体.

例如 :

.padTB5{padding:5px 0;} 
.pad10{padding:10px;}
.mTop10{margin:10px 0 0;} 
.mTop5{margin:5px 0 0;}

1. 这种方法对吗？
2. 如果不是那么为什么？
3. 如果是,那么哪个更好的保证金或填充？(我知道浏览器的保证金问题)

请指导...在此先感谢:)

Answer 1

1. 这是不好的做法,因为类应该是语义的 - 也就是说它们应该描述你正在构造的东西的类型.例如"blog-header","primary-this","secondary-that"等.

2. 在实践中,缺点为你描述使用类是,如果你的视觉设计变更,你需要不同大小的保证金或填充,则需要更改类的名称太 - 这意味着更改CSS和HTML两种.或者,如果您只是更改CSS,那么类名称将不再描述它们的用途.这种方法并不比使用内联样式好多少.

3. 边距和填充是不同的事情,并以不同的方式表现.在某些情况下,边距可能会崩溃,而填充则不会.填充将包括背景图像或颜色,而边距不包括.边框将在填充和边距之间显示.

Answer 2

边距与填充不同。margin 是盒子外面的空间，padding 是盒子里面的空间。边距和填充都是跨浏览器兼容的。您的声明是正确的，尽管不建议为边距或填充创建类。对此的一个很好的用途是为圆角或阴影创建一个类，您可以在其中通过指定圆角类来快速应用圆角。