Box-Model(x3): with Margins borders and Padding

by Keith Elias

HTML

body {                           <br />
    width: 40%;                  <br />
                                 <br />
    margin: 12px auto;           <br />
    border: 10px solid orange;   <br />
    padding: 0px 140px 0px 0px;  <br />
                                 <br />
    background: grey;            <br />
    color: pink;                 <br />
}


<div id="container">

#container {                          <br />
    width: 300px;                     <br />
                                      <br />
    margin: 0px 0px 30px 60px;        <br />
    border: 10px solid cyan;          <br />
    padding: 0px 40px 0px 0px;        <br />
                                      <br />
    background: Violet;               <br />
    color: yellow;                    <br />
}

    <p>

p {                                   <br />
    margin: 40px 10px 10px 0px;       <br />
    border: 20px solid red;           <br />
    padding: 10px 10px 40px 10px;     <br />
                                      <br />
    background: white;                <br />
    color: green;                     <br />
}


    </p>
</div>

CSS

* {background: black;              /* default/base background */
   font-size: large;
}

body {
    width: 40%;                    /* orange box BODY is 40% of screen width */

    margin: 12px auto;             /* centers body then 12 down outside top of orange boarder */
    border: 10px solid orange;     /* 10px wide orange boarder */
    padding: 0px 140px 0px 0px;    /* right inside orange border !ADDS! to 40% */

    background: grey;              /* background of body area */
    color: pink;                   /* default text color */
}

#container {
    width: 300px;                  /* of container id */

    margin:  0px  0px 30px 60px;   /* 30 bottom and 60 left of grey background */
    border: 10px solid cyan;
    padding: 0px 40px 0px 0px;     /* right inside cyan border */

    background: Violet;            /* of padding area */
    color: yellow;                 /* default text color within container id */
}

p {
                                   /* any width here will override padding below */

    margin: 40px 10px 10px 0px;    /* top outside red margin */
    border: 20px solid red;
    padding: 10px 10px 40px 10px;  /* bottom of paragraph text area */

    background: white;             /* of padding area */
    color: green;                  /* green wins here because more specific */
}