css内外边距

1.子元素设置margin-top无效果,并导致父元素塌陷

想要实现如上图这样的效果,结果变成了下图的效果

解决方法:
1.在父元素上添加 border: 1px solid red;
2. 在父元素上添加padding: 1px;
3. 在父元素上添加overflow: hidden;

**2.计算盒子尺寸因padding-left产生的问题

**
本来盒子的宽度为200px,但因为文字要向左移动一段距离,所以加上padding-left后导致盒子的宽度变了,本来预算的宽度就不够了.

解决方法:
1将本来200px的宽度设置为200-20(padding-left);
2这个问题不设置宽高就不会产生
3加上box-sizing:border-box