Borders, Padding & Margins
The CSS Sheet
First of all, the new CSS is below in bold text. Second of all, I am going to save all the navbar CSS for a page specific on the navbar. I tried many navbars
on the page and got fustratred to the point that I finally threw the whole thing away and made a whole new page which is the one you are looking at now. Then
borrowed a simple navbar in a div from w3 schools and just got finished making it responsive on this website. It took some work to get a responsive navbar that
I was satisfied with. Navbar on another page. Borders, padding and margins at bottom of page.
body {
background-color: white;
margin:0;
}
#wrapper {
width: 960px;
box-sizing:border-box;
border:solid 5px #4682b4;
margin:0 auto;
}
header {
box-sizing:border-box;
border:solid 5px #4682b4;
background-color:#b0c4de;
background-image: linear-gradient(#4682b4, white);
color: black;
}
h1 {
text-align:center;
}
h2 {
text-align:center;
}
.navbar {
background-color: #4682b4;
color: white;
}
article {
background-color:white;
color:black;
box-sizing:border-box;
padding-top:8px;
padding-bottom:20px;
}
h3 {
}
h4 {
}
.paraone {
margin:5px 20px 0 20px;
}
footer {
background-color:#b0c4de;
background-image: linear-gradient(white, #4682b4);
height:100px;
color:white;
box-sizing:border-box;
padding-top:10px;
}
Borders
Borders are a line you put around a block element. I have a border around the wrapper and a border around the header. A border has many designs from a solid line to dashes. I am just using the solid line here. You can also make it any color you want. Mine are steelblue. You can also make it any amount of pixels wide you want. Mine are 5 pixels wide. When I put a 5 pixel border around the wrapper and header, I ended up with a 10 pixel border on the top and 2 sides of the header. The syntax is: border:solid 5px #4682b4; . That means it will be a solid line, be steelblue and 5 pixels wide. You can also round the corners on borders. I intend to show you how to do the stuff I am not using on this page later after our page is ready. You can also style borders on just one side of the box. border-top:, border-right:, border-bottom: or border-left:.
Padding
Padding is the area between the main content and the border. Just like borders, you can add padding all around or on each side seperately. The syntax for padding is: padding: 10px; . I added 8 pixels to the top of the article section and 20 pixels to the bottom of the article section. This will make a seperation between the content in the article section and the content in the navbar section. This helps to keep page neat and readable. There is also 10 pixels of padding at the top of the footer.
Margins
- I added margin:0;, to the body section. There is a default margin around the body section which leaves a gap between the outer edge
of your website and the edge of screen. Styling the margins to 0 in the body eliminates that problem.
body {
margin:0;
}
- I added margin:0 auto; to the wrapper. This is what centers the 960 pixels wide page in the middle of the screen. The o means that there will be no margins on the top or bottom. The auto means that the browser will determine the margins for the right and left sides. The browser will make the margins on the right and left the same equal size therefor centering the wrapper div in the middle of the screen.
- I also put margins on our .paraone paragraph styling. Syntax: margin:5px 20px 0 20px; . This is how to style all 4 sides in one line. The first number is always the top which is 5px, The second number is always the right which is 20px, the third number is always the bottom which is 0, you do not need the px there for 0, the fourth number is the left side and is 20px. You can also do the same thing with padding.
text-align:center;
- I added text-align:center; to the h1 and h2 tags to center the text in the head section. text-align:center; centers text. More about css for text is on the text page.
Box-Sizing
box-sizing:border-box; is a way of keeping the different section lined up correctly. All the extra space required for borders, padding and margins stays inside the box instead of protruding outside the box which makes everything looked mis-aligned. I use this in most of my block elements. Especially everything that spans 100% of the wrapper.
To see what it looks like so far Click Here(opens a new window)