← Back to "CSS Tools"

CSS Box Model

Absolutely FREE

Use this tool to visualize the CSS box model. Enter the values for padding, border, and margin to see how they affect the size of the box.

Share on

Margin

Border

Padding

Preview

Content goes here

CSS

body {
    /* Margin */
    margin-top: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
    
    /* Border */
    border-color: black;

    border-top: 2px;
    border-right: 2px;
    border-bottom: 2px;
    border-left: 2px;

    /* Padding */
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
}

HTML

<div>Congent goes here</div>