CSS Box Model

Experiment with padding, margin and border.

by Vimla Ramdoo

HTML

<div id="top">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>

CSS

/*
Try this:
1. Create a second box with id of "bottom"
2. The box should have no padding or border
3. The new box should be aligned with and immediately below the old box
3. The new box should have the same width and height visually, but a border of 0
 */

body {
    margin: 0;
    padding: 0;
    border:0;
    background-color: steelblue;
}

#top{
    width: 100px;
    height: 100px;
    border-style: solid;
    border-color: goldenrod;
    border-width: 15px;
    margin: 20px;
    padding: 10px;
    background-color: palegoldenrod;
    color: black;
    overflow: hidden;
}