خودتان امتحان کنید

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="lib/w3.css">
<body>

<div class="w3-panel w3-padding w3-blue">
<h4>w3-padding</h4>
<p>I have 8px top and bottom padding and 16px left and right padding.</p>
</div>

<div class="w3-panel w3-padding-tiny w3-blue">
<h4>w3-padding-tiny</h4>
<p>I have 2px top and bottom padding and 4px left and right padding.</p>
</div>

<div class="w3-panel w3-padding-small w3-blue">
<h4>w3-padding-small</h4>
<p>I have 4px top and bottom padding and 8px left and right padding.</p>
</div>

<div class="w3-panel w3-padding-medium w3-blue">
<h4>w3-padding-medium</h4>
<p>I have 8px top and bottom padding and 16px left and right padding.</p>
</div>

<div class="w3-panel w3-padding-large w3-blue">
<h4>w3-padding-large</h4>
<p>I have 12px top and bottom padding and 24px left and right padding.</p>
</div>

<div class="w3-panel w3-padding-xlarge w3-blue">
<h4>w3-padding-xlarge</h4>
<p>I have 16px top and bottom padding and 32px left and right padding.</p>
</div>

<div class="w3-panel w3-padding-xxlarge w3-blue">
<h4>w3-padding-xxlarge</h4>
<p>I have 24px top and bottom padding and 48px left and right padding.</p>
</div>

<div class="w3-panel w3-padding-jumbo w3-blue">
<h4>w3-padding-jumbo</h4>
<p>I have 32px top and bottom padding and 64px left and right padding.</p>
</div>

</div>

</body>
</html>

Report a Problem: