初识margin与padding

一、HTML基础：

详细信息可参考MDN的HTTP文档

html元素可划分为三个层级：

• Top-Level（顶级元素）：html,body,frameset;
• block-Level（块级元素）:  块级元素列表  如：div p h1~h5 ul 等   
  • 可以设置元素的高度宽度边距等；
  • 块级元素占据其父元素（容器）的整个空间，元素宽度未设置时，默认为本身父容器的100%
  • 块级元素会新起一行
• inline（内联元素/行内元素）:内联元素列表 如：<a> <span> <br>等
  • 只能包含数据和其它内联元素，和其它元素都在一行上
  • 高度宽度边距等不可设置；
  • 元素的宽度就是她包含的文字或图片的宽度，不可改变

二、css的margin、padding区别

https://www.cnblogs.com/HDK2016/p/6127856.html这篇博客讲的比较详细

每个块级元素有四个边：外边距边 边框边 内填充边 内容边

margin:  margin详解，指自身边框与另一个容器边框的距离，因此多被称为外边框,多用于自身相对于外部容器的边距

padding：padding详解，指元素内容与其边界之间的距离，多被称为内边距，不能为负值，多用于自身相对于内部容器的边距

• 如果内容区域content area设置了背景、颜色或图片，这些样式会延伸到padding上