HTML magin和padding总结

magin：外边距样式属性
例：magin-left：以自身为参考，改变自身的左边的距离

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>边框</title>
	</head>
	<body>
		<--margin:外边距-->
		<div>大大大大大大大阿达大大啊啊啊啊大</div>
		<p>学习学习学习学习学习学习</p>
		<span>大的法规规定盖好改好发广告</span>
		<b>仿仿精仿精仿精仿附近</b>
		<style>
			*{
				margin: 0px;
				padding: 0px;
			}
			span,p,b,div{
				border: 1px solid red;
			}
			div{
				margin-bottom: 50px;
			}
			p{
				margin-top: 100px;
			}
			span{
				margin-right: 200px;
			}
			b{
				margin-left: 100px;
			}

简写样式

		<p>学习学习学习学习学习学习</p>
		<!--<span>大的法规规定</span><b>aaaaa</b><span>大的法规规定</span>-->
		<div>大大大大大大大阿达大大啊啊啊啊大</div>
		
		<style>
			span,b{
				display: inline-block;
			}
			b{
				/*margin: 50px; 全部边距*/
				/*margin: 10px 50px; 上下  左右*/
				/*margin: 10px 50px 10px; 上 左右 下*/
				margin: 10px 50px 10px 50px; /*上 右 下 左顺时针*/
			}

margin:0 auto;——水平居中显示，
*{margin:0;}——取消浏览器为HTML文档中各标签设置的margin默认值，方便后面设置，
块级元素的垂直相邻外边距会合并（即外边距合并）但左右外边距相加，合并后的外边距间距等于两个外边距高度中的较大者；行内元素实际上不占上下外边距；行内元素的的左右外边距不会合并；浮动元素的外边距也不会合并；

padding ：内边距样式属性
例：padding-left：以内部元素为参照，距离边框内边的距离

<div>额外份额其个人个人感情热熔国企改革企鹅股骨头他他且怪怪奇奇 过去提前个图哥哥哥切割啊哥热狗过热哥哥而且如果深爱</div>
		<style>
			div{
				/*padding :设置内部元素距离边框内边的间距*/
				/*padding-left: 50px ;
				padding-top: 50px;
				padding-bottom: 50px;
				padding-right: 20px;*/
				/*padding: 20px; 全部距离*/
				/*padding: 20px 50px;上下 左右*/
				/*padding: 20px 50px 20px; 上 左右 下*/
				padding: 20px 50px 20px 50px;/*上 右 下 左*/
			}
		</style>

行内非替换元素上设置的内边距不会影响行高计算，因此如果一个元素既有内边距又有背景，从视觉上看可能会延伸到其他行，有可能还会与其他内容重叠；元素的背景会延伸穿过内边距。

原文链接：https://blog.csdn.net/syhfly2333/article/details/107356385