html中padding用法 html内边距padding设置技巧解析

说实话，我刚接手电商项目的时候，也遇到过几次padding的问题。
那时，我们仍在使用旧的盒子尺寸：内容框。
结果，由于内边距过多，产品卡片比指定宽度多了几个像素，使得网格布局变得混乱。
然后老板直接给了我一套基于1 0px单位的命名约定，比如$spacing-sm和$spacing-md，都是使用SCSS自动生成的，然后我就慢慢平静下来。

有趣的是，百分比单位在响应式设计中效果很好。
我记得当我在开发金融应用程序时，我对保险条款的长文本区域使用了 padding: 3 % 5 % 。
结果，在 iPhone 6 和 iPad Pro 之间切换时，距离变化非常自然，不像硬编码的 px 那样刺耳。
但是，您应该注意一个陷阱。
例如，如果父元素的宽度是动态的，则填充百分比可能会随机跳跃。
在这种情况下，必须使用 vw/vh 视图端口单元。
我有一个使用 padding: 2 vh 5 vw 作为标题的项目。
根据屏幕高度进行上下缩放，根据宽度进行左右缩放。
效果确实不错。

说到盒子大小，当我修改旧系统时，我发现用于内容框的团队非常准确地计算了每个元素的宽度。
当我引入边界框后，他们几乎集体抗议，心想：“为什么我的元素突然变胖了？”其实坦白说，这是思维惯性，你得慢慢让他们接受“宽度就是观看内容的宽度”这个概念。
一个小提示是，当使用 padding 替换空占位符 div 时，请记住检查子元素是否被挤压，例如 li 和 dt 标签。
它们会自动缩小，无需添加 view: 块。

现在创建组件库时，我会在工具类中创建常见的填充，例如.mt-3 （顶部填充0.7 5 rem）、.pr-5 （右侧填充1 .2 5 rem）。
一位客户反映，他们的设计师总是喜欢手写padding：1 0px，但不同的设计师给出的值不同。
我只是把工具类强行加到了上面，现在新开发的组件里几乎没有手写padding了。
测试环节是最烦人的。
每次切换浏览器时，我都必须盯着按钮点击区域。
IE1 1 实际上使内边距和边框与 Chrome 完全不同。
最后我只能添加条件注释来给它们添加paddinghack。

事实上，使用padding时最大的恐惧就是忽略层次关系。
上次调试复杂表格时，我注意到标题单元格比内容单元格稍高。
经过检查，发现header添加的padding和margin比内容大，父容器的padding没有正确处理。
像这样的问题很烦人，必须一层层剥开。
现在团队规定任何嵌套元素padding都必须在父级声明overflow:hidden或者设置BFC，否则用不了多久就会陷入“这是谁的padding？”的死循环。

现在想想，填充就像咖啡里的糖一样。
加一点就失去味道，加多了就不好吃了。
关键是找到一个既不影响布局又可以增强交互体验的甜蜜程度。
我有使用衬垫的习惯按钮元素统一：0.7 5 rem 1 .2 5 rem，为上下小点、左右大点留出方便按下的空间。
感觉比直接写1 0px 2 0px更“仔细”。
事实上，无论有多少种技术方案，最终还是取决于设计稿的要求。
例如，上次为游戏官方网站制作横幅时，设计师想要一种“打包内容”的紧迫感。
最后，我继续使用 padding: 0 在内容外部添加边框。

html怎么把文字右移

我记得有一次，当我为一个电子商务网站设计页面时，我需要将产品描述信息显示在右侧，以便于用户阅读。
当时我用的是text-align:right;属性和效果都相当不错。
那天下午，我坐在办公室的工作站上，盯着屏幕，看着右对齐的文本行，我突然想到，如果页面布局更复杂，这些简单的属性可能还不够。
例如，如果我希望按钮或图像与文本一起向右移动怎么办？等等，还有一件事。
在处理表格的布局时，我发现使用margin-left属性来调整元素的位置可以使整个表格看起来更整齐。
然而，这种做法有时会影响其他元素的排列。
嘿，在网页设计行业，知识真是无处不在。