CSS_box_sizing.svg

<svg xmlns="http://www.w3.org/2000/svg" width="1024px" height="756px">
    <text transform="matrix(1 0 0 1 4 392.2432)" font-family="'Lato-Black'" font-size="72">Box sizing</text>
    <text transform="matrix(1 0 0 1 0 323.689)" font-family="'Lato-Light'" font-size="72">CSS</text>
    <rect x="254.002" y="40.801" fill="#EB5B8C" width="196.588" height="35.076" />
    <text transform="matrix(1 0 0 1 276.3125 67.8389)" fill="#FFFFFF" font-family="'Lato-Regular'" font-size="28.1163">Content box</text>
    <g>
        <g>
            <path fill="#9D9D9C" d="M363.302,623.088c-0.824,0-3.136-1.475-4.593-1.475C359.533,621.613,361.845,623.088,363.302,623.088
			L363.302,623.088z" />
        </g>
    </g>
    <rect x="469.982" y="48.334" fill="#EDEDED" stroke="#9D9D9C" stroke-width="14" stroke-miterlimit="10" width="326.405" height="227.79" />
    <rect x="535.694" y="94.193" fill="#DADADA" width="194.982" height="136.073" />
    <rect x="541.934" y="446.626" fill="#EDEDED" stroke="#9D9D9C" stroke-width="14" stroke-miterlimit="10" width="184.971" height="126.694" />
    <rect x="579.173" y="472.133" fill="#DADADA" width="110.493" height="75.681" />
    <g>
        <g>
            <path fill="#DADADA" d="M893.38,33.271c-9.255-1.478-18.498,1.119-27.52,3.032c-8.643,1.833-17.199,4.039-25.627,6.688
			c-18.144,5.702-36.219,14.146-49.317,28.293c-0.693,0.749,3.836,1.721,4.615,1.433c1.318-0.489,2.68-0.845,4-1.333
			c0.133-0.049-3.307-1.917-4.615-1.433c-1.322,0.489-2.678,0.843-4,1.333c1.538,0.478,3.076,0.955,4.615,1.433
			c11.436-12.352,26.561-20.142,42.188-25.874c8.26-3.03,16.769-5.356,25.321-7.395c4.052-0.966,8.128-1.824,12.211-2.647
			c6.227-1.255,12.768-3.09,19.148-2.071C897.823,35.277,895.187,33.559,893.38,33.271L893.38,33.271z" />
        </g>
    </g>
    <g>
        <g>
            <path fill="#DADADA" d="M755.052,198.235c19.868-2.453,38.985,5.4,56.749,13.355c16.453,7.369,34.378,14.307,48.993,24.987
			c1.494,1.092,6.02-0.771,3.965-2.272c-15.353-11.22-34.263-18.442-51.531-26.177c-18.532-8.3-38.124-15.357-58.727-12.813
			C751.452,195.691,752.068,198.604,755.052,198.235L755.052,198.235z" />
        </g>
    </g>
    <text transform="matrix(1 0 0 1 900.8896 39.0986)" fill="#9D9D9C" font-family="'Lato-Regular'" font-size="18">border</text>
    <text transform="matrix(1 0 0 1 838.1094 259.2065)" fill="#9D9D9C" font-family="'Lato-Regular'" font-size="18">padding</text>
    <text transform="matrix(1 0 0 1 571.7832 334.6304)" fill="#9D9D9C" font-family="'Lato-Regular'" font-size="18">width:200px</text>
    <text transform="matrix(1 0 0 1 571.7832 381.5518)" fill="#9D9D9C" font-family="'Lato-Regular'" font-size="18">width:240px</text>
    <text transform="matrix(1 0 0 1 460.8262 334.6299)" fill="#9D9D9C" font-family="'Lato-Regular'" font-size="18">5px</text>
    <text transform="matrix(1 0 0 1 784.7705 334.6304)" fill="#9D9D9C" font-family="'Lato-Regular'" font-size="18">5px</text>
    <text transform="matrix(1 0 0 1 499.6045 334.6304)" fill="#9D9D9C" font-family="'Lato-Regular'" font-size="18">15px</text>
    <text transform="matrix(1 0 0 1 737.6777 334.6304)" fill="#9D9D9C" font-family="'Lato-Regular'" font-size="18">15px</text>
    <g>
        <g>
            <path fill="#C6C6C6" d="M543.996,303.88c-0.008-0.03-0.004-0.059,0.011-0.083c-1.577-0.444-3.154-0.89-4.73-1.334
			c0.605,1.44,0.606,3.395,0.941,4.922c0.462,2.103,0.981,4.537,2.463,6.186c0.721,0.803,2.143,1.185,3.164,1.326
			c0.456,0.063,1.909,0.091,1.18-0.721c-1.381-1.538-1.768-4.178-2.195-6.124c-0.305-1.393-0.292-3.163-0.844-4.477
			c-0.372-0.887-4.18-2.466-4.73-1.334c-0.015,0.024-0.019,0.052-0.011,0.082C539.189,303.717,543.966,304.64,543.996,303.88
			L543.996,303.88z" />
        </g>
    </g>
    <g>
        <g>
            <path fill="#C6C6C6" d="M543.385,312.041c60.926-7.379,122.46-5.431,183.543-10.708c2.985-0.258,3.012-3.189-0.047-2.926
			c-61.529,5.316-123.498,3.401-184.871,10.835C538.685,309.645,540.913,312.341,543.385,312.041L543.385,312.041z" />
        </g>
    </g>
    <g>
        <g>
            <path fill="#C6C6C6" d="M724.526,292.806c0,7.596,0,15.19,0,22.785c0,2.173,4.756,3.642,4.756,1.201c0-0.055,0-0.108,0-0.162
			c0-2.173-4.756-3.642-4.756-1.201c0,0.055,0,0.108,0,0.162c0,2.173,4.756,3.642,4.756,1.201c0-7.596,0-15.19,0-22.785
			C729.282,291.834,724.526,290.365,724.526,292.806L724.526,292.806z" />
        </g>
    </g>
    <text transform="matrix(1 0 0 1 592.2695 627.6201)" fill="#9D9D9C" font-family="'Lato-Regular'" font-size="16.1771">width:200px</text>
    <g>
        <g>
            <path fill="#C6C6C6" d="M538.778,605.446c-0.008-0.028-0.004-0.053,0.011-0.074c-1.576-0.445-3.153-0.89-4.73-1.334
			c0.613,1.244,0.646,3.078,0.992,4.423c0.493,1.917,1.1,4.176,2.584,5.585c0.813,0.773,2.075,1.175,3.164,1.326
			c0.382,0.054,1.996,0.055,1.18-0.721c-1.393-1.323-1.861-3.689-2.321-5.479c-0.315-1.227-0.33-2.887-0.89-4.023
			c-0.438-0.89-4.081-2.469-4.73-1.334c-0.015,0.021-0.019,0.047-0.011,0.074C533.962,605.276,538.742,606.215,538.778,605.446
			L538.778,605.446z" />
        </g>
    </g>
    <g>
        <g>
            <path fill="#C6C6C6" d="M538.225,612.844c64.257-6.645,128.986-4.867,193.364-9.617c2.997-0.222,3.011-3.151-0.047-2.926
			c-64.826,4.783-129.987,3.053-194.692,9.744C533.517,610.39,535.762,613.099,538.225,612.844L538.225,612.844z" />
        </g>
    </g>
    <g>
        <g>
            <path fill="#C6C6C6" d="M729.188,595.354c0,6.826,0,13.652,0,20.479c0,2.172,4.756,3.641,4.756,1.2c0-0.049,0-0.098,0-0.146
			c0-2.173-4.756-3.642-4.756-1.201c0,0.049,0,0.098,0,0.146c0,2.172,4.756,3.641,4.756,1.2c0-6.826,0-13.652,0-20.478
			C733.943,594.383,729.188,592.914,729.188,595.354L729.188,595.354z" />
        </g>
    </g>
    <g>
        <g>
            <path fill="#9D9D9C" d="M469.187,311.01c-1.201,0.798-0.511,0.278-0.068,0.126c0.533-0.183,1.074-0.34,1.613-0.5
			c1.291-0.381,2.597-0.712,3.903-1.035c1.2-0.296,2.406-0.576,3.619-0.815c0.431-0.085,0.864-0.159,1.299-0.224
			c0.64-0.096,0.306,0.11,0.078-0.091c-0.048-0.264-0.096-0.527-0.144-0.791c0.483-0.432,0.965-0.863,1.448-1.294
			c-0.479,0.272-2.159,1.264-1.721,2.066c0.431,0.791,2.191-0.054,2.669-0.326c0.648-0.369,1.561-0.897,1.874-1.633
			c0.155-0.366,0.146-0.533-0.144-0.791c-0.51-0.453-1.985-0.008-2.557,0.093c-1.687,0.301-3.359,0.693-5.024,1.096
			c-2.963,0.718-6.348,1.362-8.927,3.076c-0.341,0.226-1.844,1.458-0.95,1.906C467.062,312.329,468.471,311.486,469.187,311.01
			L469.187,311.01z" />
        </g>
    </g>
    <g>
        <g>
            <path fill="#9D9D9C" d="M492.358,310.023c11.719-0.001,23.912,0.412,35.4-2.252c1.169-0.271,4.967-2.824,1.869-2.105
			c-10.87,2.52-22.46,2.056-33.545,2.057C494.958,307.723,491.127,310.023,492.358,310.023L492.358,310.023z" />
        </g>
    </g>
    <g>
        <g>
            <path fill="#9D9D9C" d="M465.407,302.667c-0.789,2.496-1.442,5-1.697,7.61c-0.203,2.08-0.352,4.935,1.156,6.583
			c0.869,0.95,2.907,0.96,3.927,0.288c0.472-0.311,0.782-0.639,0.773-1.228c-0.023-0.177-0.05-0.354-0.082-0.529
			c-0.144-0.872,0.205-0.463-0.594-0.066c0.984-0.49,0.863-1.579-0.005-2.089c-1.073-0.63-2.458-0.526-3.536,0.01
			c-1.282,0.638-0.796,1.729-0.781,2.838c0.243-0.349,0.486-0.698,0.729-1.046c-0.015,0.01-0.031,0.021-0.046,0.031
			c1.309,0.096,2.618,0.192,3.927,0.288c-0.941-1.029-0.544-3.821-0.469-5.094c0.138-2.336,0.819-4.606,1.52-6.824
			C470.915,301.276,465.976,300.868,465.407,302.667L465.407,302.667z" />
        </g>
    </g>
    <g>
        <g>
            <path fill="#9D9D9C" d="M477.839,300.49c0.052,2.92,0.529,5.783,1.212,8.617c0.415,1.723,0.859,3.978,2.021,5.386
			c0.908,1.102,5.104-1.122,4.756-1.545c-1.173-1.423-1.572-3.654-2.021-5.386c-0.729-2.81-1.161-5.715-1.212-8.617
			C482.583,298.28,477.815,299.125,477.839,300.49L477.839,300.49z" />
        </g>
    </g>
    <g>
        <g>
            <path fill="#9D9D9C" d="M491.783,303.225c-1.121,4.759-0.969,9.382,2.505,13.123c1.434,1.545,6.05-0.006,4.176-2.023
			c-2.774-2.988-2.689-6.818-1.806-10.572C497.23,301.321,492.275,301.132,491.783,303.225L491.783,303.225z" />
        </g>
    </g>
    <g>
        <g>
            <path fill="#9D9D9C" d="M528.484,302.674c-0.988,5.849,1.281,11.159,5.877,14.823c0.889,0.708,2.208,1.154,3.343,1.151
			c0.944-0.002,1.131-0.578,0.399-1.161c-4.054-3.231-5.748-8.114-4.893-13.185C533.446,302.91,528.661,301.626,528.484,302.674
			L528.484,302.674z" />
        </g>
    </g>
    <g>
        <g>
            <path fill="#9D9D9C" d="M735.223,297.638c-0.583,3.088-0.88,6.218-0.805,9.36c0.044,1.826,0.287,3.695,2.259,4.275
			c2.377,0.699,5.146-2.49,2.002-3.416c1.254,0.369,0.904,0.677,0.748-0.568c-0.098-0.78-0.088-1.577-0.088-2.361
			c0-2.387,0.352-4.797,0.794-7.136C740.609,295.271,735.643,295.417,735.223,297.638L735.223,297.638z" />
        </g>
    </g>
    <g>
        <g>
            <path fill="#9D9D9C" d="M741.53,306.403c12.346-1.916,24.902-1.248,37.227-3.326c3.199-0.539-0.791-2.386-2.441-2.107
			c-11.915,2.009-24.082,1.285-36.025,3.139C736.966,304.624,739.237,306.76,741.53,306.403L741.53,306.403z" />
        </g>
    </g>
    <g>
        <g>
            <path fill="#9D9D9C" d="M779.247,293.256c-0.838,4.424-0.903,11.297,4.141,13.415c0.745,0.312-0.116-1.843-0.161-1.934
			c-0.419-0.849-1.055-2.014-1.979-2.402c0.451,1.226,0.572,1.386,0.362,0.479c-0.082-0.533-0.077-1.081-0.081-1.618
			c-0.01-1.33,0.241-2.676,0.488-3.978c0.179-0.944-0.65-2.172-1.152-2.891C780.785,294.215,779.398,292.455,779.247,293.256
			L779.247,293.256z" />
        </g>
    </g>
    <g>
        <g>
            <path fill="#9D9D9C" d="M786.978,294.998c-0.725,3.121-1.263,7.299,0.057,10.345c0.398,0.919,4.673-1.544,4.105-2.854
			c-1.235-2.854-0.621-6.951,0.057-9.87c0.214-0.919-1.873,0.04-2.035,0.132C788.316,293.228,787.212,293.988,786.978,294.998
			L786.978,294.998z" />
        </g>
    </g>
    <g>
        <g>
            <path fill="#9D9D9C" d="M787.639,298.867c4.142,0.893,8.457,1.328,12.691,1.357c1.919,0.013,7.993-0.472,7.876-3.444
			c-0.062-1.568-4.667,0.136-4.613,1.495c0.037,0.94,2.735-1.026,1.171-0.85c-0.59,0.066-1.189,0.066-1.781,0.075
			c-1.517,0.023-3.033-0.11-4.541-0.249c-2.435-0.223-4.882-0.548-7.273-1.064C789.88,295.91,785.83,298.477,787.639,298.867
			L787.639,298.867z" />
        </g>
    </g>
    <g>
        <g>
            <path fill="#9D9D9C" d="M802.619,292.296c-0.821,3.132,0.099,7.21,1.251,10.145c0.666,1.697,5.136,3.027,4.059,0.283
			c-0.943-2.402-1.542-5.849-0.876-8.387C807.517,292.567,803.177,290.172,802.619,292.296L802.619,292.296z" />
        </g>
    </g>
    <g>
        <g>
            <path fill="#9D9D9C" d="M460.288,360.685c-0.418-0.04-0.664-0.366-0.147,0.042c0.082,0.063,0.528,0.621,0.715,0.856
			c0.683,0.862,1.256,1.81,1.807,2.76c0.698,1.203,1.35,2.439,1.95,3.694c1.09,2.278,5.935,1.128,4.742-1.365
			c-0.806-1.686-1.705-3.331-2.682-4.923c-1.185-1.93-2.779-4.716-5.309-4.959c-1.162-0.111-2.627,0.307-2.978,1.58
			C458.059,359.557,459.178,360.578,460.288,360.685L460.288,360.685z" />
        </g>
    </g>
    <g>
        <g>
            <path fill="#9D9D9C" d="M465.235,363.581c17.384-0.017,34.798-0.946,52.166-1.584c31.577-1.159,63.15-2.434,94.723-3.739
			c57.621-2.383,115.265-4.64,172.852-7.765c3.404-0.185,6.809-0.371,10.21-0.606c1.039-0.071,3.964,0.123,4.62-0.968
			c1.215-2.021-3.479-3.613-4.504-1.91c0.416-0.692,1.784-0.636,0.37-0.499c-0.774,0.075-1.551,0.128-2.327,0.183
			c-2.688,0.188-5.378,0.338-8.067,0.488c-9.437,0.527-18.877,0.983-28.317,1.437c-29.81,1.432-59.624,2.741-89.44,4.027
			c-60.899,2.628-121.809,5.294-182.735,7.226c-6.714,0.213-13.436,0.478-20.154,0.484
			C461.325,360.357,462.598,363.584,465.235,363.581L465.235,363.581z" />
        </g>
    </g>
    <g>
        <g>
            <path fill="#9D9D9C" d="M800.372,340.38c0.002,5.077,0.064,10.13,0.815,15.162c0.24,1.604,4.478,4.053,4.141,1.791
			c-0.751-5.031-0.814-10.084-0.815-15.162C804.512,340.546,800.372,337.993,800.372,340.38L800.372,340.38z" />
        </g>
    </g>
    <g>
        <g>
            <line fill="none" stroke="#9D9D9C" stroke-miterlimit="10" x1="536.232" y1="0" x2="536.232" y2="3" />
            <line fill="none" stroke="#9D9D9C" stroke-miterlimit="10" stroke-dasharray="6.036,6.036" x1="536.232" y1="9.036" x2="536.232" y2="669.982" />
            <line fill="none" stroke="#9D9D9C" stroke-miterlimit="10" x1="536.232" y1="673" x2="536.232" y2="676" />
        </g>
    </g>
    <g>
        <g>
            <line fill="none" stroke="#9D9D9C" stroke-miterlimit="10" x1="731.232" y1="0" x2="731.232" y2="3" />
            <line fill="none" stroke="#9D9D9C" stroke-miterlimit="10" stroke-dasharray="6.036,6.036" x1="731.232" y1="9.036" x2="731.232" y2="669.982" />
            <line fill="none" stroke="#9D9D9C" stroke-miterlimit="10" x1="731.232" y1="673" x2="731.232" y2="676" />
        </g>
    </g>
    <rect x="326.002" y="439.838" fill="#EB5B8C" width="196.588" height="35.076" />
    <text transform="matrix(1 0 0 1 355.7773 466.876)" fill="#FFFFFF" font-family="'Lato-Regular'" font-size="28.1163">Border box</text>
</svg>