margin和padding补充学习

其实说白了padding就是内容与边框的空隙.而margin则是模块与模块的空隙。

![Uploading margin和padding和border同时存在的效果图_471335.PNG . . .]

margin:是元素之间的安全距离

• margin-top
• margin-right
• margin- bottom
• margin- left

其属性值可以为像素， em 或百分比

百分比是基于包含元素大小计算的，也就是说根据父亲元素计算的。

margin和padding和border同时存在的效果图.PNG

padding：文本与border之间的填充区域，如果没有padding属性，文本直接贴近border。

p.one {
border: 1px solid red; //设置padding边框
background-color: yellow;
padding-top: 50px; //padding文本与边框之间的距离
padding-right: 30px;
padding-bottom: 50px;
padding-left: 10px;
margin:50px; //元素之间的距离
}