块级元素和行内元素的区别？行内元素设定margin和padding的区别？
块级元素独占一行，相邻的行内元素可以和排在一行上
块级元素可以设定宽高，行内元素设定宽高无效
块级元素可以设定内边距，上右下左都有效；行内元素可以设定内边距，左右有效，上下设定后会影响background，但是不参与高度计算。
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
div {
height: 60px;
color: #fff;
background-color: #000;
}
span {
padding: 50px;
background-color: #f00;
}
</style>
</head>
<body>
<div>11111111</div>
aaaa<span>555</span>bbbb
<div>22222222</div>
</body>
</html>
===============运行效果===============
块级元素可以设定外边距，上右下左都有效；行内元素可以设定外边距，左右有效，上下无效。
块级元素不设定宽度时，其尽量占满父元素的宽度；行内元素的宽度是其内部内容撑起的宽度。
块级元素可以容纳其他块级元素和行内元素；行内元素只能容纳文本或者其他行内元素。
浙公网安备 33010602011771号