Html+CSS 同行的DIV 被 Padding挤下来

Html+CSS 同行的DIV 被 Padding挤下来

自己写CSS遇到的问题，做一下笔记

• 效果和页面显示
  
• CSS代码
  
  这里造成这样的原因是：
  1. width, height 等属性是控制内容的宽高
  2. 在行内中 默认是vertical-align：bottom ——在行内，以底对齐
  3. 所以当再加padding时，它会撑大被加了padding的div 它这时的大小为 width-height+pading 总体
  4. 它又是以底对齐，先前加的padding就像给 没有加padding的div的顶部与行的顶部加了个间隙，高度等于padding的值
• 没有padding的大小
  
• 加了padding的大小
  
• 解决

  1. 固定div的大小——box-sizing: border-box;

     为元素设定的宽度和高度决定了元素的边框盒。
     就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
     通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

  2. 如果你想做更多的排版可以试试 vertical-align:top