The Box Model
Block-level elements are those html tags that define the structure of the page. For example, <p></p>, <h1></h1>, <ul></ul>, <ol></ol>, <div></div>, and
<span></span> are block-level elements. Tags such as <strong></strong>, <b></b>, and <u></u>, which format the content of the page and describe how it should look are NOT block-level elements. Rather they are called inline elements.
All block level elements can be thought of as occupying rectangular boxes on the screen. These boxes have the following elements which can be manipulated:
<span></span> are block-level elements. Tags such as <strong></strong>, <b></b>, and <u></u>, which format the content of the page and describe how it should look are NOT block-level elements. Rather they are called inline elements.
All block level elements can be thought of as occupying rectangular boxes on the screen. These boxes have the following elements which can be manipulated:
The Padding is the space between the content of the element (the text, in this example) and the border.
The Border is the space between the padding and the margin.
The Margin in the space between the border and the boundary of the element with other elements on the web page.
The box model can be used to structure elements on a page. For example, the Margin can be adjusted with the following property codes:
The Border is the space between the padding and the margin.
The Margin in the space between the border and the boundary of the element with other elements on the web page.
The box model can be used to structure elements on a page. For example, the Margin can be adjusted with the following property codes:
The Border can be adjusted with the following property codes:
You can also set the border width. This thickness of the border can also be adjusted with the keywords THICK or THIN:
WIDTH EXAMPLES:
p {border-width: 10px;}
p {border-top-width: thick;}
p {border-left-width: thin;}
Border color can be adjusted as follows:
COLOR EXAMPLES:
h1 {border-color: blue;}
h1 {border-color: #000033;}
All of these properties can be combined into a kind of shorthand with the following format:
BORDER PROPERTIES SHORTHAND EXAMPLE:
h1 {border: dashed 10px orange;}
Just be sure to put the properties in the order shown: line style then line width then color.
The Padding can be adjusted in a similar way to the margin and the border:
PADDING PROPERTIES EXAMPLE:
div {padding: 10px;}
div {padding-right: 5px;}
An element's overall width and height can be adjusted as well:
p {width: 200px; height 300px;}
NOTE:
The Box Model is often used by web designers to design sections of a web page. For example, the entire page may be surrounded by a <div> tag with margin, padding, and/or border properties set.
WIDTH EXAMPLES:
p {border-width: 10px;}
p {border-top-width: thick;}
p {border-left-width: thin;}
Border color can be adjusted as follows:
COLOR EXAMPLES:
h1 {border-color: blue;}
h1 {border-color: #000033;}
All of these properties can be combined into a kind of shorthand with the following format:
BORDER PROPERTIES SHORTHAND EXAMPLE:
h1 {border: dashed 10px orange;}
Just be sure to put the properties in the order shown: line style then line width then color.
The Padding can be adjusted in a similar way to the margin and the border:
PADDING PROPERTIES EXAMPLE:
div {padding: 10px;}
div {padding-right: 5px;}
An element's overall width and height can be adjusted as well:
p {width: 200px; height 300px;}
NOTE:
The Box Model is often used by web designers to design sections of a web page. For example, the entire page may be surrounded by a <div> tag with margin, padding, and/or border properties set.