I am relatively new to CSS and I am currently in the process of testing and experimenting to better understand how it works.
For instance, in the code snippet provided, we see that the selector .box h3 has a padding: 6px 10px 4px 10px;.
Therefore, the padding-right value is set to 10px. However, changing this value to 0 would not have any impact on the layout.
Similarly, the selector .box ul has a padding: 14px 10px 14px 10px;, allowing us to set
padding-right: 0 without affecting the layout.
What would be considered the best practice when setting the padding-right property in this scenario?
<!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>