为什么a标签上下没有间距？

img

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <title>Title</title>
    <style>
        a {
            padding: 10px;
            border-radius: 15px;
            background: #29a9c4;
        }
    </style>
</head>
<body>
</body>
<script>
    let str = ``;
    for (let i = 0; i < 300; i++) {
        str += `<a href='#'>链接</a>`;
    }
    $(`body`).html(str);
</script>
</html>

你可以给a标签加上margin样式，上下左右，这样就可以有间距啦

直接增加margin代码，增加上下间距

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"</script>
    <title>Title</title>
    <style>
        a {
            padding: 10px;
            border-radius: 15px;
            background: #29A9C4;
            margin: 10px 0;  // 新增的样式
        }
    </style>
</head>
<body>
</body>  
<script>
    let str = ``;
    for (let i = 0; i < 300; i++) {
        str += `<a href='#'>链接</a>`;
    }
    $(`body`).html(str);
</script>
</html>

为a标签设置 display: inline-block;