Question

我对CSS很陌生，所以我只是测试和试验它是如何工作的

在此示例中，我们有.box h3的选择器padding: 6px 10px 4px 10px;，所以padding-right这里是10px。但实际上，此padding-right可以0没有导致布局有任何差异。

同样在选择器.box ul中我们有padding: 14px 10px 14px 10px;，所以我们可以设置 padding-right: 0不会导致布局发生任何变化。

在此示例中设置padding-right时使用的最佳做法是什么？

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Chapter 5: Indestructible Boxes</title>
    <style type="text/css" media="screen">
        body 
        {
            font-family: Arial, sans-serif;
            font-size: small;
        }

        a 
        { 
            color: #00458B; 
        }

        .box 
        {
            width: 273px;
        }

        .box h3 
        {
            margin: 0;
            padding: 6px 10px 4px 10px;
            font-size: 130%;
            color: #333;
            background:#e3e3e3;
        }

        .box ul 
        {
             margin: 0;
             padding: 14px 10px 14px 10px;
             list-style: none;
         }

         .box ul li
         { 
             margin:0 0 6px;
             padding:0;
         }
    </style>
</head>
<body>
    <div class="box">
    <h3>Gifts and Special Offers</h3>
    <ul>
    <li><a href="/purchase/">Purchase Gift Subscription</a></li>
    <li><a href="/redeem/">Redeem Gift Subscription</a></li>
    <li><a href="/view/">View Purchase History</a></li>
    </ul>
    </div>
</body>
</html>

Answer 1

我认为最好保持在padding-right：10px。这样，如果你给盒子一个背景颜色，你将能够看到内容没有碰到盒子的边缘（即使你使链接更长，或者如果用户增加了字体大小）。

Answer 2

你应该保留它以防万一，你不想以后编辑代码。

无论如何padding: 14px 10px 14px 10px;可以padding: 14px 10px;节省空间，padding: 6px 10px 4px 10px;也可以是padding: 6px 10px 4px; see here。

Answer 3

填充左侧就足够了，大多数情况下都不需要填充右侧，因为.box只有宽度：273px;

在这种情况下，padding-right可以是0

3 个答案: