Box model with div : Box model Basics « Style Basics « HTML / CSS






  1. HTML / CSS
  2. Style Basics
  3. Box model Basics

Box model with div

  

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'>
    <head>
        <title>box model</title>
        <style rel='stylesheet' type='text/css'>

div#box-wrapper {
    background: gold;
    border: 1px solid blue;
}
div#box {
    border: 20px solid #f6c;
    margin: 20px;
    padding: 20px;
    background: #f90;
}
div#box-inner {
    background: pink;
    color: rgb(244, 244, 244);
}        
        </style>
    </head>
    <body>
        <div id='box-wrapper'>
            <div id='box'>
                <div id='box-inner'>
                    Lorem ipsum dolor sit amet, consectetuer adipiscing
                    elit. Proin consectetuer neque ac eros. Vivamus vel
                    nibh. Vestibulum aliquam neque a nisi. Nullam eu
                    turpis. Proin mi. Cras dictum semper felis. Maecenas
                    porttitor neque at dolor. Integer vel libero vitae
                    ante lobortis tristique. Morbi sapien diam, tristique
                    sed, placerat pharetra, luctus eget, neque.
                    Pellentesque leo mauris, sollicitudin a, malesuada
                    vitae, varius vitae, quam. Cras eget tellus vel nunc
                    dapibus pharetra.

                    Phasellus varius tincidunt quam. Maecenas viverra
                    mattis orci. Etiam porttitor luctus ligula. Ut ac
                    nibh. In commodo imperdiet sapien. Nulla vel sapien
                    sed mauris euismod pharetra. Quisque eu ante eget
                    pede tristique tincidunt. Curabitur eu erat eu libero
                    aliquam placerat. Pellentesque felis erat, cursus
                </div>
            </div>
        </div>
    </body>
</html>








Related examples in the same category

1.Box Dimensions
2.Box Model defines properties of: display, width, height, padding, border, margin, background, overflow, and visibility.
3.Spacing: indentation, margins, padding, letter spacing, word spacing, text justification, and line spacing
4.Box Model Basics
5.Understanding the Box Model
6.The margin Properties
7.The Padding Properties
8.Box model for child and parent relationship
9.Inner box
10.Inner box with DIV
11.Inner box padding and border
12.Left text alignment for inner box
13.Width setting
14.block multiline inline box model with margin and padding
15.Float left in a container
16.Float inside
17.Simple float clearing in Mozilla
18.Setting box dimensions and aligning text
19.Floating elements and element boxes
20.Setting borders of an element
21.Block Box
22.Table Box
23.border and padding shrink the inner box of stretched absolute boxes.
24.A percentage of the height of its container.
25.A percentage of the width of its container.
26.auto is the default value for width and height.
27.Style sheet for boxModel illustration