第一次写前端页面调样式的时候，卡在padding什么意思这个问题上，对着浏览器开发者工具反复点来点去，页面盒子忽大忽小，怎么都对齐不了。那时候脑子里只记着margin是外边距，想当然就把padding当成和margin差不多的东西，随便填了个数值就往代码里写，完全没意识到两个属性作用的位置根本不是一回事。
打开本地预览页面，文字紧贴着盒子边框，挤成一团，看着特别别扭。想着加一点间距就能拉开，直接在样式里写了padding:20px，刷新页面，文字确实离边框远了，可整个模块宽度一下子撑出去一大截，右边直接压到旁边的按钮，原本排好的整行布局直接错位。
以为只是数值写太大，改成10px再试。模块宽度缩小了一点，但错位的问题依旧存在，相邻的元素还是挤在一起。那会完全搞不懂，明明只是给盒子内部加空隙，怎么外部整体尺寸还会跟着变大。反复增减数字，一会5px一会15px，来回刷新，页面一会挤一会松，越调越乱。
旁边工位同事路过瞟了一眼屏幕，随口提了一句盒模型。没太听懂，只听见他说，默认情况下，padding会算进盒子总宽高里面。盯着浏览器元素面板的盒模型示意图看，蓝色那块是内容区域，绿色那一圈就是padding，它是盒子内部，内容和边框中间的空白区域，不是盒子和外面别的元素之间的距离。
原来一直混淆了内外两个间距。
之前一直下意识觉得，加内部留白不会改变盒子本身大小，这想法完全不对。没有设置box-sizing的时候，内容宽高固定，padding每加一点，整个盒子的实际占用宽高就跟着增加。难怪一改padding，页面整体排版就跟着偏移，不是内容挪位置，是整个盒子实体变大，挤占了旁边元素的空间。
试着在样式加上box-sizing:border-box。再把padding设回20px，刷新页面。盒子整体宽度保持不变，只有内部文字和边框之间多出空隙，旁边按钮不再被挤压，布局稳住了。当时盯着屏幕愣了好一会，同一个padding数值，仅仅多了一行属性，呈现出来的效果差别这么大。
后面又随便试了单边写法，padding-top、padding-left，单独给不同方向设置数值。只给上边和左边留白的时候，只有对应方向的文字会远离边框，另外两边还是紧贴着。才发现这个属性不一定要四个方向统一，想要哪边留出内部空白，就单独设置哪边，不是只能一次性给四周设置一样的距离。
有一次还犯过一个错，给行内元素直接写大padding。文字块上下padding生效，但是没有推开上下其他内容，元素重叠了一小块。查了之后才晓得，行内元素的上下padding视觉上会渲染出来，但不会影响文档流里其他元素位置，和块级元素表现不一样。同一段padding代码，放在不同类型标签上，出来的效果完全两样。
折腾这么久，也只是摸到一点点皮毛。只代表我自己调试页面时碰到的情况，换别的布局场景，或者不同浏览器环境，表现说不定会有出入。
关掉编辑器，电脑屏幕还留着那个盒模型示意图。那天晚上躺在床上，脑子里反复回放页面被padding撑变形的画面。