文章列表，行高的单位，行高与font关系，margin特殊现象

来源：互联网发布：mac口红子弹头编辑：程序博客网时间：2024/06/09 21:03

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style>/*清除标签默认的padding和margin*/*{padding: 0;margin: 0;}body{background-color: gainsboro;}.content{width: 328px;height: 226px;border: 1px solid #00BFFF;margin: auto;margin-top:100px;padding:0 15px;}h3{font-size: 10px;margin-top: 18px;border-bottom: 1px solid orange;padding-bottom:6px ;}span{font-size: 14px;}ul{margin-top:10px ;}li{font-size: 12px;/*清除列表标签的黑点*/list-style: none;line-height: 30px;border-bottom: 1px dashed red;padding-left:20px;}a{text-decoration: none;color: #080808;list-style: none;}</style></head><body><div class="content"><h3>最新文章<span>new articles</span></h3><ul><li><a href="#">这是一条新闻连接</a></li><li><a href="#">这是一条新闻连接</a></li><li><a href="#">这是一条新闻连接</a></li><li><a href="#">这是一条新闻连接</a></li><li><a href="#">这是一条新闻连接</a></li> </ul></div></body></html>

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style>*{padding: 0;margin: 0;}.content{width: 260px;height: 327px;border:1px solid orange;margin: 0 auto;margin-top: 20px;background-color:pink;padding: 10px;}h3{font-family: "黑体";font-size: 20px;color: white;border-left:4px solid #1B6D85 ;padding-left:5px;}li{font-size: 12px;list-style: none;height: 30px;line-height: 30px;border-bottom: 1px dashed mediumpurple;padding-left:16px ;}a{text-decoration: none;color: #4CAE4C;}ul{background-color: white;margin-top: 5px;}</style></head><body><div class="content"><h3>爱宠知识</h3><ul><li><a href="#">这是一条新闻</a></li><li><a href="#">这是一条新闻</a></li><li><a href="#">这是一条新闻</a></li><li><a href="#">这是一条新闻</a></li><li><a href="#">这是一条新闻</a></li><li><a href="#">这是一条新闻</a></li></ul></div></body></html>

伪类：

行高：