unicorn-utterances/content/blog/css-fundamentals/box-model.svg

<svg width="720" height="349" viewBox="0 0 720 349" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="142" y="0.5" width="436" height="348" fill="#FFC68B"/>
<path d="M347.672 33H346.367V25.4844C346.367 24.8906 346.404 24.1641 346.477 23.3047H346.445C346.32 23.8099 346.208 24.1719 346.109 24.3906L342.281 33H341.641L337.82 24.4531C337.711 24.2031 337.599 23.8203 337.484 23.3047H337.453C337.495 23.7526 337.516 24.4844 337.516 25.5V33H336.25V21.7969H337.984L341.422 29.6094C341.688 30.2083 341.859 30.6562 341.938 30.9531H341.984C342.208 30.3385 342.388 29.8802 342.523 29.5781L346.031 21.7969H347.672V33ZM356.18 33H354.898V31.75H354.867C354.31 32.7083 353.49 33.1875 352.406 33.1875C351.609 33.1875 350.984 32.9766 350.531 32.5547C350.083 32.1328 349.859 31.5729 349.859 30.875C349.859 29.3802 350.74 28.5104 352.5 28.2656L354.898 27.9297C354.898 26.5703 354.349 25.8906 353.25 25.8906C352.286 25.8906 351.417 26.2188 350.641 26.875V25.5625C351.427 25.0625 352.333 24.8125 353.359 24.8125C355.24 24.8125 356.18 25.8073 356.18 27.7969V33ZM354.898 28.9531L352.969 29.2188C352.375 29.3021 351.927 29.4505 351.625 29.6641C351.323 29.8724 351.172 30.2448 351.172 30.7812C351.172 31.1719 351.31 31.4922 351.586 31.7422C351.867 31.987 352.24 32.1094 352.703 32.1094C353.339 32.1094 353.862 31.888 354.273 31.4453C354.69 30.9974 354.898 30.4323 354.898 29.75V28.9531ZM362.766 26.2969C362.542 26.125 362.219 26.0391 361.797 26.0391C361.25 26.0391 360.792 26.2969 360.422 26.8125C360.057 27.3281 359.875 28.0312 359.875 28.9219V33H358.594V25H359.875V26.6484H359.906C360.089 26.0859 360.367 25.6484 360.742 25.3359C361.117 25.0182 361.536 24.8594 362 24.8594C362.333 24.8594 362.589 24.8958 362.766 24.9688V26.2969ZM370.984 32.3594C370.984 35.2969 369.578 36.7656 366.766 36.7656C365.776 36.7656 364.911 36.5781 364.172 36.2031V34.9219C365.073 35.4219 365.932 35.6719 366.75 35.6719C368.719 35.6719 369.703 34.625 369.703 32.5312V31.6562H369.672C369.062 32.6771 368.146 33.1875 366.922 33.1875C365.927 33.1875 365.125 32.8333 364.516 32.125C363.911 31.4115 363.609 30.4557 363.609 29.2578C363.609 27.8984 363.935 26.8177 364.586 26.0156C365.242 25.2135 366.138 24.8125 367.273 24.8125C368.352 24.8125 369.151 25.2448 369.672 26.1094H369.703V25H370.984V32.3594ZM369.703 29.3828V28.2031C369.703 27.5677 369.487 27.0234 369.055 26.5703C368.628 26.1172 368.094 25.8906 367.453 25.8906C366.661 25.8906 366.042 26.1797 365.594 26.7578C365.146 27.3307 364.922 28.1354 364.922 29.1719C364.922 30.0625 365.135 30.776 365.562 31.3125C365.995 31.8438 366.565 32.1094 367.273 32.1094C367.992 32.1094 368.576 31.8542 369.023 31.3438C369.477 30.8333 369.703 30.1797 369.703 29.3828ZM374.234 22.9688C374.005 22.9688 373.81 22.8906 373.648 22.7344C373.487 22.5781 373.406 22.3802 373.406 22.1406C373.406 21.901 373.487 21.7031 373.648 21.5469C373.81 21.3854 374.005 21.3047 374.234 21.3047C374.469 21.3047 374.667 21.3854 374.828 21.5469C374.995 21.7031 375.078 21.901 375.078 22.1406C375.078 22.3698 374.995 22.5651 374.828 22.7266C374.667 22.888 374.469 22.9688 374.234 22.9688ZM374.859 33H373.578V25H374.859V33ZM384.094 33H382.812V28.4375C382.812 26.7396 382.193 25.8906 380.953 25.8906C380.312 25.8906 379.781 26.1328 379.359 26.6172C378.943 27.0964 378.734 27.7031 378.734 28.4375V33H377.453V25H378.734V26.3281H378.766C379.37 25.3177 380.245 24.8125 381.391 24.8125C382.266 24.8125 382.935 25.0964 383.398 25.6641C383.862 26.2266 384.094 27.0417 384.094 28.1094V33Z" fill="black"/>
<rect x="189.5" y="48" width="341" height="253" fill="#FDFFB2"/>
<path d="M337.734 80.5V69.2969H340.922C341.891 69.2969 342.659 69.5339 343.227 70.0078C343.794 70.4818 344.078 71.099 344.078 71.8594C344.078 72.4948 343.906 73.0469 343.562 73.5156C343.219 73.9844 342.745 74.3177 342.141 74.5156V74.5469C342.896 74.6354 343.5 74.9219 343.953 75.4062C344.406 75.8854 344.633 76.5104 344.633 77.2812C344.633 78.2396 344.289 79.0156 343.602 79.6094C342.914 80.2031 342.047 80.5 341 80.5H337.734ZM339.047 70.4844V74.1016H340.391C341.109 74.1016 341.674 73.9297 342.086 73.5859C342.497 73.237 342.703 72.7474 342.703 72.1172C342.703 71.0286 341.987 70.4844 340.555 70.4844H339.047ZM339.047 75.2812V79.3125H340.828C341.599 79.3125 342.195 79.1302 342.617 78.7656C343.044 78.401 343.258 77.901 343.258 77.2656C343.258 75.9427 342.357 75.2812 340.555 75.2812H339.047ZM350.078 80.6875C348.896 80.6875 347.951 80.3151 347.242 79.5703C346.539 78.8203 346.188 77.8281 346.188 76.5938C346.188 75.25 346.555 74.2005 347.289 73.4453C348.023 72.6901 349.016 72.3125 350.266 72.3125C351.458 72.3125 352.388 72.6797 353.055 73.4141C353.727 74.1484 354.062 75.1667 354.062 76.4688C354.062 77.7448 353.701 78.7682 352.977 79.5391C352.258 80.3047 351.292 80.6875 350.078 80.6875ZM350.172 73.3906C349.349 73.3906 348.698 73.6719 348.219 74.2344C347.74 74.7917 347.5 75.5625 347.5 76.5469C347.5 77.4948 347.742 78.2422 348.227 78.7891C348.711 79.3359 349.359 79.6094 350.172 79.6094C351 79.6094 351.635 79.3411 352.078 78.8047C352.526 78.2682 352.75 77.5052 352.75 76.5156C352.75 75.5156 352.526 74.7448 352.078 74.2031C351.635 73.6615 351 73.3906 350.172 73.3906ZM360.281 73.7969C360.057 73.625 359.734 73.5391 359.312 73.5391C358.766 73.5391 358.307 73.7969 357.938 74.3125C357.573 74.8281 357.391 75.5312 357.391 76.4219V80.5H356.109V72.5H357.391V74.1484H357.422C357.604 73.5859 357.883 73.1484 358.258 72.8359C358.633 72.5182 359.052 72.3594 359.516 72.3594C359.849 72.3594 360.104 72.3958 360.281 72.4688V73.7969ZM368.5 80.5H367.219V79.1406H367.188C366.594 80.1719 365.677 80.6875 364.438 80.6875C363.432 80.6875 362.628 80.3307 362.023 79.6172C361.424 78.8984 361.125 77.9219 361.125 76.6875C361.125 75.3646 361.458 74.3047 362.125 73.5078C362.792 72.7109 363.68 72.3125 364.789 72.3125C365.888 72.3125 366.688 72.7448 367.188 73.6094H367.219V68.6562H368.5V80.5ZM367.219 76.8828V75.7031C367.219 75.0573 367.005 74.5104 366.578 74.0625C366.151 73.6146 365.609 73.3906 364.953 73.3906C364.172 73.3906 363.557 73.6771 363.109 74.25C362.661 74.8229 362.438 75.6146 362.438 76.625C362.438 77.5469 362.651 78.276 363.078 78.8125C363.51 79.3438 364.089 79.6094 364.812 79.6094C365.526 79.6094 366.104 79.3516 366.547 78.8359C366.995 78.3203 367.219 77.6693 367.219 76.8828ZM377.523 76.8203H371.875C371.896 77.7109 372.135 78.3984 372.594 78.8828C373.052 79.3672 373.682 79.6094 374.484 79.6094C375.385 79.6094 376.214 79.3125 376.969 78.7188V79.9219C376.266 80.4323 375.336 80.6875 374.18 80.6875C373.049 80.6875 372.161 80.3255 371.516 79.6016C370.87 78.8724 370.547 77.849 370.547 76.5312C370.547 75.2865 370.898 74.2734 371.602 73.4922C372.31 72.7057 373.188 72.3125 374.234 72.3125C375.281 72.3125 376.091 72.651 376.664 73.3281C377.237 74.0052 377.523 74.9453 377.523 76.1484V76.8203ZM376.211 75.7344C376.206 74.9948 376.026 74.4193 375.672 74.0078C375.323 73.5964 374.836 73.3906 374.211 73.3906C373.607 73.3906 373.094 73.6068 372.672 74.0391C372.25 74.4714 371.99 75.0365 371.891 75.7344H376.211ZM383.641 73.7969C383.417 73.625 383.094 73.5391 382.672 73.5391C382.125 73.5391 381.667 73.7969 381.297 74.3125C380.932 74.8281 380.75 75.5312 380.75 76.4219V80.5H379.469V72.5H380.75V74.1484H380.781C380.964 73.5859 381.242 73.1484 381.617 72.8359C381.992 72.5182 382.411 72.3594 382.875 72.3594C383.208 72.3594 383.464 72.3958 383.641 72.4688V73.7969Z" fill="black"/>
<rect x="237" y="101" width="246" height="152.5" fill="#A3F0B7"/>
<path d="M333.898 129.266V133.5H332.586V122.297H335.664C336.862 122.297 337.789 122.589 338.445 123.172C339.107 123.755 339.438 124.578 339.438 125.641C339.438 126.703 339.07 127.573 338.336 128.25C337.607 128.927 336.62 129.266 335.375 129.266H333.898ZM333.898 123.484V128.078H335.273C336.18 128.078 336.87 127.872 337.344 127.461C337.823 127.044 338.062 126.458 338.062 125.703C338.062 124.224 337.188 123.484 335.438 123.484H333.898ZM346.562 133.5H345.281V132.25H345.25C344.693 133.208 343.872 133.688 342.789 133.688C341.992 133.688 341.367 133.477 340.914 133.055C340.466 132.633 340.242 132.073 340.242 131.375C340.242 129.88 341.122 129.01 342.883 128.766L345.281 128.43C345.281 127.07 344.732 126.391 343.633 126.391C342.669 126.391 341.799 126.719 341.023 127.375V126.062C341.81 125.562 342.716 125.312 343.742 125.312C345.622 125.312 346.562 126.307 346.562 128.297V133.5ZM345.281 129.453L343.352 129.719C342.758 129.802 342.31 129.951 342.008 130.164C341.706 130.372 341.555 130.745 341.555 131.281C341.555 131.672 341.693 131.992 341.969 132.242C342.25 132.487 342.622 132.609 343.086 132.609C343.721 132.609 344.245 132.388 344.656 131.945C345.073 131.497 345.281 130.932 345.281 130.25V129.453ZM355.805 133.5H354.523V132.141H354.492C353.898 133.172 352.982 133.688 351.742 133.688C350.737 133.688 349.932 133.331 349.328 132.617C348.729 131.898 348.43 130.922 348.43 129.688C348.43 128.365 348.763 127.305 349.43 126.508C350.096 125.711 350.984 125.312 352.094 125.312C353.193 125.312 353.992 125.745 354.492 126.609H354.523V121.656H355.805V133.5ZM354.523 129.883V128.703C354.523 128.057 354.31 127.51 353.883 127.062C353.456 126.615 352.914 126.391 352.258 126.391C351.477 126.391 350.862 126.677 350.414 127.25C349.966 127.823 349.742 128.615 349.742 129.625C349.742 130.547 349.956 131.276 350.383 131.812C350.815 132.344 351.393 132.609 352.117 132.609C352.831 132.609 353.409 132.352 353.852 131.836C354.299 131.32 354.523 130.669 354.523 129.883ZM365.227 133.5H363.945V132.141H363.914C363.32 133.172 362.404 133.688 361.164 133.688C360.159 133.688 359.354 133.331 358.75 132.617C358.151 131.898 357.852 130.922 357.852 129.688C357.852 128.365 358.185 127.305 358.852 126.508C359.518 125.711 360.406 125.312 361.516 125.312C362.615 125.312 363.414 125.745 363.914 126.609H363.945V121.656H365.227V133.5ZM363.945 129.883V128.703C363.945 128.057 363.732 127.51 363.305 127.062C362.878 126.615 362.336 126.391 361.68 126.391C360.898 126.391 360.284 126.677 359.836 127.25C359.388 127.823 359.164 128.615 359.164 129.625C359.164 130.547 359.378 131.276 359.805 131.812C360.237 132.344 360.815 132.609 361.539 132.609C362.253 132.609 362.831 132.352 363.273 131.836C363.721 131.32 363.945 130.669 363.945 129.883ZM368.477 123.469C368.247 123.469 368.052 123.391 367.891 123.234C367.729 123.078 367.648 122.88 367.648 122.641C367.648 122.401 367.729 122.203 367.891 122.047C368.052 121.885 368.247 121.805 368.477 121.805C368.711 121.805 368.909 121.885 369.07 122.047C369.237 122.203 369.32 122.401 369.32 122.641C369.32 122.87 369.237 123.065 369.07 123.227C368.909 123.388 368.711 123.469 368.477 123.469ZM369.102 133.5H367.82V125.5H369.102V133.5ZM378.336 133.5H377.055V128.938C377.055 127.24 376.435 126.391 375.195 126.391C374.555 126.391 374.023 126.633 373.602 127.117C373.185 127.596 372.977 128.203 372.977 128.938V133.5H371.695V125.5H372.977V126.828H373.008C373.612 125.818 374.487 125.312 375.633 125.312C376.508 125.312 377.177 125.596 377.641 126.164C378.104 126.727 378.336 127.542 378.336 128.609V133.5ZM387.586 132.859C387.586 135.797 386.18 137.266 383.367 137.266C382.378 137.266 381.513 137.078 380.773 136.703V135.422C381.674 135.922 382.534 136.172 383.352 136.172C385.32 136.172 386.305 135.125 386.305 133.031V132.156H386.273C385.664 133.177 384.747 133.688 383.523 133.688C382.529 133.688 381.727 133.333 381.117 132.625C380.513 131.911 380.211 130.956 380.211 129.758C380.211 128.398 380.536 127.318 381.188 126.516C381.844 125.714 382.74 125.312 383.875 125.312C384.953 125.312 385.753 125.745 386.273 126.609H386.305V125.5H387.586V132.859ZM386.305 129.883V128.703C386.305 128.068 386.089 127.523 385.656 127.07C385.229 126.617 384.695 126.391 384.055 126.391C383.263 126.391 382.643 126.68 382.195 127.258C381.747 127.831 381.523 128.635 381.523 129.672C381.523 130.562 381.737 131.276 382.164 131.812C382.596 132.344 383.167 132.609 383.875 132.609C384.594 132.609 385.177 132.354 385.625 131.844C386.078 131.333 386.305 130.68 386.305 129.883Z" fill="black"/>
<rect x="284.5" y="154" width="151" height="52" fill="#8FBBEB"/>
<path d="M340.781 186.031C339.953 186.469 338.922 186.688 337.688 186.688C336.094 186.688 334.818 186.174 333.859 185.148C332.901 184.122 332.422 182.776 332.422 181.109C332.422 179.318 332.961 177.87 334.039 176.766C335.117 175.661 336.484 175.109 338.141 175.109C339.203 175.109 340.083 175.263 340.781 175.57V176.969C339.979 176.521 339.094 176.297 338.125 176.297C336.839 176.297 335.794 176.727 334.992 177.586C334.195 178.445 333.797 179.594 333.797 181.031C333.797 182.396 334.169 183.484 334.914 184.297C335.664 185.104 336.646 185.508 337.859 185.508C338.984 185.508 339.958 185.258 340.781 184.758V186.031ZM346.234 186.688C345.052 186.688 344.107 186.315 343.398 185.57C342.695 184.82 342.344 183.828 342.344 182.594C342.344 181.25 342.711 180.201 343.445 179.445C344.18 178.69 345.172 178.312 346.422 178.312C347.615 178.312 348.544 178.68 349.211 179.414C349.883 180.148 350.219 181.167 350.219 182.469C350.219 183.745 349.857 184.768 349.133 185.539C348.414 186.305 347.448 186.688 346.234 186.688ZM346.328 179.391C345.505 179.391 344.854 179.672 344.375 180.234C343.896 180.792 343.656 181.562 343.656 182.547C343.656 183.495 343.898 184.242 344.383 184.789C344.867 185.336 345.516 185.609 346.328 185.609C347.156 185.609 347.792 185.341 348.234 184.805C348.682 184.268 348.906 183.505 348.906 182.516C348.906 181.516 348.682 180.745 348.234 180.203C347.792 179.661 347.156 179.391 346.328 179.391ZM358.906 186.5H357.625V181.938C357.625 180.24 357.005 179.391 355.766 179.391C355.125 179.391 354.594 179.633 354.172 180.117C353.755 180.596 353.547 181.203 353.547 181.938V186.5H352.266V178.5H353.547V179.828H353.578C354.182 178.818 355.057 178.312 356.203 178.312C357.078 178.312 357.747 178.596 358.211 179.164C358.674 179.727 358.906 180.542 358.906 181.609V186.5ZM365.039 186.422C364.737 186.589 364.339 186.672 363.844 186.672C362.443 186.672 361.742 185.891 361.742 184.328V179.594H360.367V178.5H361.742V176.547L363.023 176.133V178.5H365.039V179.594H363.023V184.102C363.023 184.638 363.115 185.021 363.297 185.25C363.479 185.479 363.781 185.594 364.203 185.594C364.526 185.594 364.805 185.505 365.039 185.328V186.422ZM373.18 182.82H367.531C367.552 183.711 367.792 184.398 368.25 184.883C368.708 185.367 369.339 185.609 370.141 185.609C371.042 185.609 371.87 185.312 372.625 184.719V185.922C371.922 186.432 370.992 186.688 369.836 186.688C368.706 186.688 367.818 186.326 367.172 185.602C366.526 184.872 366.203 183.849 366.203 182.531C366.203 181.286 366.555 180.273 367.258 179.492C367.966 178.706 368.844 178.312 369.891 178.312C370.938 178.312 371.747 178.651 372.32 179.328C372.893 180.005 373.18 180.945 373.18 182.148V182.82ZM371.867 181.734C371.862 180.995 371.682 180.419 371.328 180.008C370.979 179.596 370.492 179.391 369.867 179.391C369.263 179.391 368.75 179.607 368.328 180.039C367.906 180.471 367.646 181.036 367.547 181.734H371.867ZM381.766 186.5H380.484V181.938C380.484 180.24 379.865 179.391 378.625 179.391C377.984 179.391 377.453 179.633 377.031 180.117C376.615 180.596 376.406 181.203 376.406 181.938V186.5H375.125V178.5H376.406V179.828H376.438C377.042 178.818 377.917 178.312 379.062 178.312C379.938 178.312 380.607 178.596 381.07 179.164C381.534 179.727 381.766 180.542 381.766 181.609V186.5ZM387.898 186.422C387.596 186.589 387.198 186.672 386.703 186.672C385.302 186.672 384.602 185.891 384.602 184.328V179.594H383.227V178.5H384.602V176.547L385.883 176.133V178.5H387.898V179.594H385.883V184.102C385.883 184.638 385.974 185.021 386.156 185.25C386.339 185.479 386.641 185.594 387.062 185.594C387.385 185.594 387.664 185.505 387.898 185.328V186.422Z" fill="black"/>
<rect x="284.5" y="154" width="151" height="52" stroke="black"/>
<rect x="237" y="101" width="246" height="152.5" stroke="black" stroke-dasharray="5 5"/>
<rect x="189.5" y="48" width="341" height="253" stroke="black"/>
<rect x="142" y="0.5" width="436" height="348" stroke="black" stroke-dasharray="5 5"/>
</svg>