0

我对 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>
4

3 回答 3

1

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

于 2013-08-29T16:44:38.360 回答
1

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

反正padding: 14px 10px 14px 10px;可以padding: 14px 10px;节省空间，padding: 6px 10px 4px 10px;也可以padding: 6px 10px 4px; 在这里看到。

于 2013-08-29T16:56:54.570 回答
0

在大多数情况下，padding-left 就足够了，而 padding-right 不需要，因为 .box 只有 width: 273px;

于 2013-08-29T16:53:01.897 回答