CSS Boxes

Subject: CSS Boxes
Author: CyberSpider
Posted on: 04/15/2016 02:01:43 AM

Whenever device to display a visible element of your HTML document, there are actually FOUR boxes to be laid out:

margin-box -- the most outside one, ALWAYS TRANSPARENT (you cannot color it);

border-box -- this one can have colors on both front face and background;

padding-box -- this one can only have color on background;

content-box -- the most inside one which renders your element.

    div {
        background-color: #ACF;
        /* margin-box */
        margin: 10px 20px 30px 40px;  /*top right bottom left*/
        /* border-box */
        border: 30px solid #0000FF; 
        /* padding-box */
        padding: 40px; 
        /* content-box */
        color: red;
    }

Try it yourself in sandbox »

References:

Next Post: CSS Display CyberSpider 04/15/2016 08:12:58 PM
Previous Post: Multiple Backgrounds CyberSpider 04/14/2016 06:36:51 PM
Next Topic: CSS Display CyberSpider 04/15/2016 08:12:58 PM
Previous Topic: CSS Background CyberSpider 04/14/2016 05:08:10 PM
Index: by Date
Index: by Topic