Box properties and what they do to boxes (divs):
- Width: – Adjusting this adjusts the width of the box. For example width: 100px; will make a 100px wide box. max-width and min-width are recommended for stopping text stretching a ‘box’
- Margin:, margin-left:, margin-right, margin-top, margin-bottom: – Adjusting this causes a margin around the outside of the box.
- Padding: padding-left:, padding-right:, padding-top:, padding-bottom: – this is the same as margin however it is in the inside of the box
- Border:, border-width, border-style:, border-color: – These all add and change the look of the border around the outside of the box. border: is a shorthand style to apply width, style and color to a border. e.g. border: 1px solid black;.
- font-style:, font-size:, font-family:, color: – font-style can be used to select underline and italics etc. for the text inside a box, font-size adjusts the size of the text eg. font-size:12px;,font-family adjusts he font face used and priority separated by a comma. eg. font-family: Verdana, Arial, Tahoma, Times New Roman; would tell the browser to use Arial and if it isn’t available Tahoma etc. color simply changes the color of the text using hexadecimal colours as with the invalid way of styling with html.
- Display: inline; and display:block; – this changes the way the box behaves. As an inline element, it will sit side by side to the box marked up before it until it cant fit on the page or in the box which it is in. As a block element, it will refuse to sit by the box marked up before it, and will go below it.
