极客观点
项目管理
HarmonyOS
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<link rel="stylesheet" href="css/index.css" />
<style>
* {
margin: 0;
padding: 0;
}
ul {
width: 800px;
margin: 0 auto;
background-color: pink;
border: 1px solid black;
}
ul li {
width: 100px;
height: 50px;
margin-top: 50px;
list-style: none;
background-color: seagreen;
}
</style>
</head>
<body>
<ul>
<li>linear</li>
<li>ease</li>
<li>ease-in</li>
<li>ease-out</li>
<li>ease-in-out</li>
</ul>
</body>
</html>如题，没给ul添加border的时候，li标签的margin-top会使得整个ul有margin-top但是给ul添加上border后，margin-top就不对ul产生影响了呢？
html5
这个属于语法规则了：
嵌套的父子结构ul和li在垂直方向上的margin值，会取父子中较大的然后统一作用到父元素上面，如果你给父元素ul加了border之后，这个规则就发生了变化，垂直方向上margin就各管各的了