パディングはボックスサイズの計算に影響します

1.ボックス自体に幅がある場合、パディングを追加するときは、計算(減算)する必要があります。これは、ボックスのサイズに影響を与えることはありません。

2.コード:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米侧边栏</title>
    
    <style>
            /* 1.把a转换为块级元素 */
            a{
                 display: block;
                 width: 200px;
                 height: 40px;
                 background-color: #55585a;
                 font-size: 14px;
                 color: #fff;
                 text-decoration: none;
                 padding-left: 30px;
                 line-height: 40px;
            }

            /* 2.鼠标经过链接变换背景颜色 */
            a:hover{
                     background-color: #ff6700;
                     
            }

    </style>

</head>

<body>
    
            <a href="#">手机    电话卡</a>    
            <a href="#">电视    盒子</a>    
            <a href="#">笔记本  平板</a>    
            <a href="#">出行    穿戴</a>    
            <a href="#">智能    路由器</a>    
            <a href="#">健康    儿童</a>    
            <a href="#">耳机    音响</a>    
</body>

</html>

3.操作効果:

 

おすすめ

転載: blog.csdn.net/weixin_42900834/article/details/123455473