36 lines
1.0 KiB
Markdown
36 lines
1.0 KiB
Markdown
|
|
||
|
## W3 CSS Containers
|
||
|
W3.css provides a container class which adds 16 pixels worth of left and right padding to any html element, and 0.01em of
|
||
|
top and bottom padding.
|
||
|
This makes it ideal for html containing elements such as ```<header>, <div>, <footer>, <section>```etc. But can also be used with great effect on elements like ```<img> and <p>.```
|
||
|
|
||
|
### Simple example
|
||
|
```
|
||
|
<header class="w3-container">
|
||
|
<h1>Header With W3 Container</h1>
|
||
|
</header>
|
||
|
```
|
||
|
```
|
||
|
<header>
|
||
|
<h1>Header Without W3 Container</h1>
|
||
|
</header>
|
||
|
```
|
||
|
Would produce the following result.
|
||
|
|
||
|
![Header img](https://github.com/OcelotDive/randomImages/blob/master/images/WithWithout.PNG)
|
||
|
|
||
|
### To use W3.Css Containers
|
||
|
Just add a regular stylesheet link to the head of your web page like so:
|
||
|
```
|
||
|
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
|
||
|
```
|
||
|
or download the latest css file to your local machine. Here: (https://www.w3schools.com/w3css/4/w3.css)
|
||
|
|
||
|
|
||
|
|
||
|
#### More Information on W3.Css Containers
|
||
|
|
||
|
##### W3schools.com (https://www.w3schools.com/w3css/w3css_containers.asp)
|
||
|
|
||
|
|