RWDHTMLCSS.COM
Html & CSS Walkthrough
The Box Model
box-sizing:border-box;
- We will use box-sizing:border-box; in the CSS on our block elements. With box-sizing:border-box; the dimensions you
specified for the box will not expand for the borders, padding and margins. The borders, padding and margins will stay within the specified width and
height. This way the content area will become smaller but I like the way box-sizing:border-box; controls my block elements. The style below is much
harder than the one we will use. But below is how the box model works. Content, plus margins, borders and padding. I want to keep this demonstration as
easy as possible.
* {
box-sizing:border-box;
}
* is a selector that is not used much.Selectors are explained on another page. The styling you put with the star selector will apply to everything on the page.
I did not use it for my demonstration but that is the easy way of applying box-sizing:border-box; to all of all your pages without applying it to each
individual box.
Inline Elements
- There are inline elements and block elements.
- Inline elements flow with the normal
flow of text like words and pictures unless styled to work otherwise. Some
inline elements are a, br, small, abbr, button, img, script, span, big, em, input,
q, strong and b.
Block Elements
- Block elements like div, ul, li, header, footer, article,
aside, table, aside, address, pre, nav, h1 to h6, video and form do not follow the
normal flow of text. They are containers which you put information in that you want
to appear on your web page.
- Block elements by default take up 100% width of the
screen or 100% of the container it is nested in. For example, if it is in the body
element, It would fill the whole width of the browser window but if the element is inside
another div in which this div is styled to only have a 50% width, then the width of the
block element would be 100% of the 50% wide div it is nested in. By default,
the height of the block element is only
the height required by the text or other element inside the div box.
- The box model consists of the content in the box, padding, margins and borders.
Some block elements have default styling and some do not. Like the h1 - h6 has default styling. This is how to declare no margins, borders
or padding if you need to.
in the html:
<div id="sports"></div>
in the css:
#sports {
margin:0;
border:0;
padding:0;
}
More on styling padding, borders, and margins are on another page.
The
box element or the <div> which we are using for our example, has the content inside the box, then there is padding
between the content and border, then outside the border is margins.If you have a div that is 400 pixels wide by 200 pixels high and you
add padding, borders and margins, your dimensions are no longer 400 x 200. If you style your div
like this:
in the html:
<div id="sports"></div>
in the css:
#sports {
width:400px;
height:200px;
margin:5px;
border:solid 1px black;
padding:15px;
}
You have added 5 pixels of margins which adds 10 pixels to the width and 10 pixels
to the height because you added 5 pixels on all four sides.
You have to add in the amount of space that the margins, borders and padding
will take. There is margins, borders and padding on all 4 sides of the box. If
padding is 15 pixels, you need to add 30 pixels to the width. Same goes for the
height and for the margins and borders.
The width this div requires is:
400px + 30px + 10px + 2px = 442px
You may need to calculate this when filling spaces on your webpage.
Do the height the same way.
I used a <div> for a example but it works the same way for all the block elements.