x
<html><title>W3.CSS</title><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"><body><div class="w3-container"><h2>Navigation Bar Sizes</h2><p>Add the w3-padding-classes to change the padding of each element inside the navigation bar.</p><p>w3-padding-small:</p><div class="w3-bar w3-border w3-green"> <a href="#" class="w3-bar-item w3-button w3-padding-small">Home</a> <a href="#" class="w3-bar-item w3-button w3-padding-small">Link 1</a> <a href="#" class="w3-bar-item w3-button w3-padding-small">Link 2</a></div><p>Default:</p><div class="w3-bar w3-border w3-green"> <a href="#" class="w3-bar-item w3-button">Home</a> <a href="#" class="w3-bar-item w3-button">Link 1</a> <a href="#" class="w3-bar-item w3-button">Link 2</a></div><p>w3-padding-large:</p><div class="w3-bar w3-border w3-green"> <a href="#" class="w3-bar-item w3-button w3-padding-large">Home</a> <a href="#" class="w3-bar-item w3-button w3-padding-large">Link 1</a> <a href="#" class="w3-bar-item w3-button w3-padding-large">Link 2</a></div><p>w3-padding-16:</p><div class="w3-bar w3-border w3-green"> <a href="#" class="w3-bar-item w3-button w3-padding-16">Home</a> <a href="#" class="w3-bar-item w3-button w3-padding-16">Link 1</a> <a href="#" class="w3-bar-item w3-button w3-padding-16">Link 2</a></div><p>w3-padding-24:</p><div class="w3-bar w3-border w3-green"> <a href="#" class="w3-bar-item w3-button w3-padding-24">Home</a> <a href="#" class="w3-bar-item w3-button w3-padding-24">Link 1</a> <a href="#" class="w3-bar-item w3-button w3-padding-24">Link 2</a></div><p>w3-padding-32:</p><div class="w3-bar w3-border w3-green"> <a href="#" class="w3-bar-item w3-button w3-padding-32">Home</a> <a href="#" class="w3-bar-item w3-button w3-padding-32">Link 1</a> <a href="#" class="w3-bar-item w3-button w3-padding-32">Link 2</a></div>