When it comes to styling components on your website, is it better to write your own CSS for padding and margin or utilize Bootstrap 4's spacing helpers?
Let's consider Option A:
<div class="header-item">
<a href="contact">
<div class="item-info">
<img class="img-icon" src="help.svg" alt="Contact">
</div>
<div class="header-item-txt">
<div><strong>Contact</strong></div>
<div class="sub-txt">+36 343 434 343</div>
</div>
</a>
</div>
Styles applied to the .header-item class in Option A:
.header-item {
padding: 2rem 1rem;
font-size: 18px;
position: relative;
cursor: pointer;
}
Alternatively, consider Option B. By removing padding styles from the CSS and utilizing Bootstrap helpers:
<div class="header-item px-1 pt-2 pb-2">
... content
</div>
The CSS for Option B would be:
.header-item {
font-size: 18px;
position: relative;
cursor: pointer;
}
Which approach do you think is best?