(window.webpackJsonp=window.webpackJsonp||[]).push([[25],{421:function(e,t){e.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAiAAAAEsCAYAAAD6owj6AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAABxjSURBVHgB7d3LjxzV+Tfw4zcgC0uOibwADCj2xgtiCSKywNlwWQQWSIAEZAkEUJbc9rH9B4BhDeGyDCABEgvYcFtgFlixFRNLlhCOfFtZwgwyMRu/fuqnM2nG5fGUXfV45sznI7Wmq7u6uhmmz3l8zrdOrTl7TgEASPT/CgBAMgUIAJBOAQIApFOAAADpFCAAQDoFCACQTgECAKRTgAAA6RQgAEA6BQgAkE4BAgCkU4AAAOkUIABAOgUIAJBOAQIApFOAAADpFCAAQDoFCACQTgECAKRTgAAA6RQgAEA6BQgAkE4BAgCkU4AAAOl+tfOcMrG9e/eWTZs2zd8/ceLEkrZ//vnnsm/fvnLy5Mly3XXXTb49NzdXDhw4UH788ceycePGybfjfQ8ePNh9jmuvvXby7ePHj5dDhw51v+f169dPvn348OHy7bfflrVr15Z169albcd7x2PxWeKxqbfj/+VVV13V/b89cuTI5NuX8l261O2s717dzvru1e2s717dzvru1e3s717dzvru1e2s717dvpTvUr3P/6w5e04BAEhkCgYASJdSgMTwEwCsRvrAflcVABjJm2++OX//wQcf7DIwsyK78dlnn81vP/7442Vq77//fnnllVe6z/PMM88UlgcZEABGs2bNmvn7L7/88nkdfhQoTzzxxPx2Rhf00EMPdUXIXXfdVT799NPC8qAAAWA0swVIX4d/9913/2IEJKMLilGXt956qzzwwAPltttuKywPKVMwMf91++23FwBWjyg0vv/++/lpmDr9EtvxeN/+H3zwQfdcFApRMGzevHn+uc8//7zceuut3eujoNixY0f3fBw3pljidVH0/Pa3v+32vfPOO7vtOMW7vn8cd+Gx4j1DPPfYY4+VsekDL+Bsgn/9619nAWhfdCtxe/zxx7uf56Zh5p974403usfOFQXz+1XPPvvs/GP1dq64OPvdd991z+/cubN77FzBMP/8udGV7vnZx2b3ideE+lni5+yx4vgL3zOOOTZ9YL+Us2C2bdtWAFg9YnQhRPaiilGKsHCUIUYoIi8SYsrmn//8ZzcaESMWu3bt+sW+dZQjwqsxehH5jngsRkLee++9cq7IKUsVx9+9e3f3nnVqpn7GMekD+6VMwZw5c6ZbrQ6A1SE69CgUYrojCowoFuJnPFanVWb3PTeS8YvH6tRJFAkLH6+5kig86vRKFB7xXIjpmdmcyYXE/udGXrr7cYZMHKtvauhy6QP7pRQgsYyt+S+A1SM68ujUZ3Md4UIZi9gnrgwypACY3XdhUbOc6AP7pUzBqPwAVpdTp07NFxtx6m2diolRh4WjGlGkxEhEFBQxJRKjIXVkogX6wH4yIABMIqZdasERtxgR6RupiDNSQkzFROER+yxlJCT2q2fYxLTLcqUP7JdSgMT8FwCrz+yUS5xW2ydOlw2RwYhQadxmV1RdTB0piembWGNk4Tojy4E+sF9KARLzXwCsPnU59rhdaNn1GCWJNT1CTNVEARGvCzVkeiHxulqExOtipGW55UH0gf1SVkKNX74hKAAWE9MudeGyhdeQudjr6s8oPrZs2dIVIn1LwV8J+sB+lmIHYMWq15aJ0ZXIkNQRlBBh1uV8dsxqZx0QAFasKDqiyJjNjMToSZxNs1yKD31gv5QREOvgAzClet2ZKDpmz45ZDvSB/VJGQMau/GavtggAYxvz3+ZGP/qtyAyIAgSAKYlHTs86IAAwIX1gP+uAAMCE9IH9UgqQ9evXFwBYjfSB/ZrJgBw7dqwAwFA33njjeY/JgEwvZQRkbm6uAMBqpA/sl1KAHDp0qADAaqQP7CcDAgAT0gf2kwEBYFWTAbkyZEAAYEL6wH4pS7HH/Jd18AHG8/bbb5/32E033dRd9v3Xv/51uRxx7Oeee667f6HR5S+//LI88sgj8/scOXKk7Nixo9t++eWXL/sztEQf2C+lADH/BTCuWiAsdPPNN5cnn3yyPP300yXTDz/8UD7++OPu/jfffFO2b99e+D/6wH4pBcjWrVsLAOO79957y+9+97vufhQA0fnv3LmzGwnJLALiM+zevbu7r/j4JX1gv5QCJOa/VIAA47vvvvvKo48+2t1/4YUXysMPP1z27NnTTaPUQiCmS6Iw+fe//91N08T+MVIy69VXX+2ej9ecOnWq971m91k4xRIjIDENU+/X/UOMxvzjH/+Yf2185tnXx+eroyfx2eKzxrFiv1pcrWT6wH4yIAANqR17LQZefPHF8tJLL/1in9h+/fXXu9GTUIuW0JctCTHlU5+LnwsLkCha6vvUgqhuv/baa/NFSbw2bu+++263HUVKjNhUsW8cO/aPIqmFAkQf2M86IACNiKIjRg9C7bhr0bBr167y1VdfzWdDamA0Rh5q8REjKFEYLOz0Y596nLrPwhGUxfz5z3/uXhOvDfF+8VmjyIiCI0TREvvE56zFSiv0gf1kQABWsCgkYpQjHD16tPsZxcFTTz3V3a8jDVVMwYQ6QhLTHyGmRp5//vnufrx2NuTat08UE3/5y1/KUkQoto5mzH7W+Az1M8dxY594j1octUIf2E8GBGAFi9GCOmIQUxeRm6ideX0+OvQ6ytH3+rDYiEbfPpfSpi+ctpktmIaMqKw0+sB+rgUDsILFmSexDkfcDh482G3PFh8xShHFR0y9xBRMTHGQSx/YL6UA2bhxYwEg14EDB86b4li4xPgtt9zS/fzoo4/mRzoWngXTt0897uWoWZOYiqkjNK3lP4I+sF/KFMzmzZsLALnqqqh1JCQKkCgiZkVANM5WiX3+9Kc/dcVGPSV2yD6XIgqQyHxE8RGfr95vjT6wX8oIyMmTJwsAuaL4iCmXCJ5Gxx7Fx+wiYTHyEPvE0umxTx2JWLiK6lL2uVQxZRTHrSuptnDa7UL6wH4pV8Pdu3fvqOdAuxouwDBROGzYsGHRa7SMtc+lfrY69XPHHXd0P+MMnoxVVae+Gu7YfWArUqZgzH8BXFlLOctkrH2GiNNy33nnne7CdlHUxP36Pq0s6a4P7CcDAsAVEyMfMdowu1prFB+1EGmBPrBfyhRMzH+NWQGaggFoS10dNTIg2TmQqadgxu4DW5EyAnL48GG/fAAuKKZbWr2Krj6wn3VAAGBC+sB+KVMwYzMFA8BYpp6Cod+vds5eB3kiMf+1bt26Mpa+pYTrVRan9OGHH85fVCjux/K6fds//fRTdz57rBS4ZcuW0bbj9xjhrPj5ySefjLYd7/PFF1+U06dPl+uvv3607RCVf/xe6uJCY2zv27evfP311+Waa67pAmxjbcex4+803mv//v2jbcfvOq5QGmsdXH311aNtL+Vvcei2v11/u8vtbzfjQm6zAdhqzK5x7D6wFdYBAWBVsw7IlSEDAgAT0gf2SylAWjkHOoYDAcjRSptrHZB+rgUzgDk8gDyttLmuBdMvpQCJc6BbcM899xQAcrTS5rbSB44tpQC54YYbSgsiKQ9Ajlba3Fb6wLGlFCCbNm0qLYhTyADI0Uqb20ofOLaUpdiPHz/exP8AGRAgfPnll916Fj/88EN3Bdf77rtv9KvE0k6b20ofODbrgAAMEJeP71u46vnnnx99QcS4ONvbb7/d3R/72FE8vfrqq939p59+uiukVivrgFwZKQXI2NXflSpAYj7SKAisXrPFx1NPPdVdtTVWD61Fwu7du8ujjz5axhIjLY888kh3f+w2LoqbO+64o7v/1VdfLcsRnKw2d+oCxAhIv5QpmJYyIPfff38BVqfZ0YgY8Qi14Ijn4jZbgHz00UfdUvQxuhDFyuxz8fiBAwfKH//4x66zi+0QhU0UA1HYvPPOO/P7R/ET+9YrxsYUULxfjGTccsstv5gGutCx4/3jc9TXVq+99lr3+uV2NdpW2lzFRz8ZkAGMfsDqFaMRca2YcO+99/7iuSga4nondRojioKHH3646+hnRUf/7rvvdvtFcVKLlnrc2X3i/WaLhDryEkVCPP7cc8/94th///vfu1sUGBc7dox+xP3Zx+MzLbcCRAakbSlnwZw4caK0wDogsHrNzc3N3184XRGdfoyKRJYixGhFFB+x3+uvv97dokCJx2ruooop5Xi+FiYhCogYrZi9IFo8H49F8VCLj3i/eDwKonh8x44dFzx2vH89dhQa8Xg19tTRWFppc1vpA8dmHZABrGYHq9epU6fm718ssBmdfIhpmigO4hajJGF2WiVEMRDPx8+YBgkxghLFSxQ2s/vVqZkQ96NAicfrFcLjuXht37FjOmb22DFts/DYy00rba51QPpZB2SA+sUHVp8NGzbM34/RhsXUaY/ZTr0WExd77cXU18fPCE/GrYZJw2yhtNK10uaafuknAzKAKxrC6jU7YhAFxmxxESHPmFqJkZHZqY3ZYmB2CmcM8V51VGXWbKG00rXS5sqA9JMBGWC5BbSAPFFw1DZgNscRUxp/+9vfun+t186/7jf7L/g6LXOp7UidWqlTKSFyG5E9idu2bdu67ZbW82ilzZUB6ZcyAtJSBsQoCKxe0dHH2S0x4hHTHjVYWldErafm1v3i7JJ6JkwtRmpQdSlmR1nieJHniGPXU2njM8Rj8f5x/Lg/OwKzmNmRkieffHL+2MtJK22uDEg/GZABZEBgdYt/kccZJVEARAajhj7r47VgiO04syQKlNgnblGgxGMLT+FdTByvFgVRcNRsSZxuW89aiWIojh/vOaSAiM/Td+zlRAakbSkrocaliDdv3lzGcqVWQq1fcoAoPCLjESMJi0171NDo5ZxlUt9r4TGW+hku5djLQVabO/VKqGP3ga1wLRgAVjXXgrkyUqZgWqn8rAMCkKeVNtfoR7+UAqSV4KYMCECeVtpcJy/0SylAYv6rBXUpYwCm10qb20ofOLaUAqSVYbTbbrutAJCjlTbX9H0/GZABluNpagCtaqXNlQHpJwMywL59+woAOVppc2VA+smADCADApBHBqRtMiADyIAA5JEBaZsMyAAyIAB5ZEDaJgMygAwIQB4ZkLbJgAwgAwKQRwakbTIgA8iAAOSRAWmbDMgAhw4dKgDkaKXNlQHpJwMygAIEIE8rba4MSL+UAqSVP6KtW7cWAHK00ub6x2u/lAJkbm6utEABApBnpbe5b775ZnnooYfKiy++WDjfVSVBS1WsIgQgx0puc3ft2lV27tw5v71p06ayY8eOwv+kjICsX7++tMAwGkCeldrmLiw+glNxzycDMoDRD4A8K7HN7Ss+gtGP88mADKAAAciz0trcxYoPp+KeL6UAaaXjthQ7QJ6V1OZeqPh44403ygsvvFA4nwzIAC5GB5BnpbS5ixUfjz/+eDN94NhkQAawFDtAnpXQ5l6s+AhOYOiXchpuKxkQF6MDyLPc29ylFB9hsT4w1gpZKPIid911V5lKnJGzZcuW7v533313xfIp1gEZIOYjjYIA5FjObe5Si4+wWB/4xBNP9D4eRcHu3bvLgw8+WFolAzKADAhAnuXa5g4pPsJS+sAoNOKYzz77bFd8xChFFCfff/99aVXKCEgrK4ga/QDIsxzb3KHFR1hKHxgFyGOPPdbdf+CBB8rdd9/dFR9RiNTfQ2y/9dZb3cjQtdde2+03O1XzyiuvdPvE4x988EH3WF1/5P333+8eq6/rE+8V+8TxowiKz1OnZz777LPy+eefl1tvvbU7RnyOyz29WAZkABkQgDzLrc29lOIjXE4fGJ19iOIgipLZFVVffvnl7vPUIiOmbP7zn/90j0chEsVBPPfcc891j1V9uZMoUBaOuMRrPv30064AiuIj3quOzoTZAuVSWAdkAOuAAORZTm3uhYqPEB33mjVrLnj7wx/+cNGl2KMoiOPELS5gF2ZHGGrxEcXAe++91xUbIT5TjE7MiiIiCqIYVYnX1OLjmWee6QqKhQHX2D+KlPhZ94mpoNhemFGJ48Xr4/i1OLpUKSMgLWVATMMA5FhObe6Fio+xLCwionOvZ6pEIVYLmBhtqb+TmC6J18V0yGxREQVHFBIhpmVCFDK1EIn7MeJRxehGHD/es+4T7xH3Z987xPtEgTKGlBGQAwcOlBZs3769AJBjObW5l/uv/YuJEZCzZ892txjdqKMYUWDMTovMFmS16Fg4ujL7WetrF5sqqSNNsW8dtfnNb35z3jHGljICcubMmdKCjRs3FgByLKc2t2YpMsT0R4w+RJ5j//795c4775x/LoqBWmAMKQwW27ceL37Ge1/o+bGljIBs27attGDPnj0FgBzLqc2NjvlCV7SdHb3ou/33v/8dFNaMEYkoPsKGDRu619YiYDYXU6dRFpumqs/FKEkdKVlYjMSZLfXxKHbivzNucbbM5QZNF5NSgKxdu7a04OTJkwWAHMutzZ0942RWTJVEDuNCltIHRoETmY+4/f73v+8eqyuizo5MRBg1QqqxXxQUsU/Ne/SJgiL2ieKivjZ+zor3qNM5s/vE56iB2CnIgAwgAwKQZzm2uZdShCylD6xrftQwaBwvwp519KGOSoQY+ahno8QZMYuNUMSx6j7xmnhtX8ES+9RTiWOfyJ7E8SP0OpU1Z2N8aGJ79+4tt99+exlLBGQWOnbsWAGAoW688cbzHrtY1xiFSJyau1BMx9QFxaqx+8A6lTJ0aqQWNxfLdFzq8YdKKUAihDrmNMyVKkBiPtIoCECOrDb3UgqQsNQiZOw+sBUyIAPIgADkWe5t7lKnYxQf/WRABjD6AZBnJbS5SylCWukDx2YdkAGsAwKQZ6W0uXWV1IXTMTXU2cpSFGOzDsgAn3zySQEgx0pqcxcbCYkQKueTARng9OnTBYAcK63NvVAR8te//vW8a70gAzLIPffcUwDIsRLb3AsVIYstVLZapRQgrWRA1q1bVwDIsVLb3L4ipC53zv/IgAwgAwKQZyW3uVGExCqisZpoFCN9F3lb7VLOgpEBAWCold7mRgC1ngnD+VJGQFpJAMuAAORppc11Fky/lAKkFTIgAHm0uW1LKUDGvAjPlSQDApCnlTa3lT5wbEZABpABAcijzW2bDMgA999/fwEgRyttrgxIPyMgAEA6GZABPvzwwwJAjlbaXBmQfkZAAIB0MiADyIAA5JEBaZsREAAgnQzIADIgAHlkQNpmBGQAq/IB5NHmtk0GZADXggHI41owbTMCMoBV+QDyaHPbJgMygGvBAORxLZi2pRQgZ86cKS0wHwmQp5U2t5U+cGwpBciBAwdKC2RAAPK00ua20geOLaUAWbt2bWmB+UiAPK20ua30gWNLKUC2bdtWWiADApCnlTa3lT5wbDIgA8iAAOSRAWmbDMgAMiAAeWRA2iYDMsDJkycLADlaaXNlQPrJgAywZ8+eAkCOVtpcGZB+MiADbNy4sQCQo5U2VwaknwzIANu3by8A5GilzZUB6ScDMoAMCEAeGZC2yYAMIAMCkEcGpG0yIAPIgADkkQFpmwzIADIgAHlkQNomAzKADAhAHhmQtsmADCADApBHBqRtKQXI3NxcacFNN91UAMjRSpvbSh84tpQC5NChQ6UFt912WwEgRyttbit94NhSCpD169eXFhw9erQAkKOVNreVPnBsKQXI1q1bSwv27dtXAMjRSpvbSh84NhmQAWRAAPLIgLRNBmQAGRCAPDIgbZMBGUAGBCCPDEjbZEAGkAEByCMD0jYZkAFkQADyyIC0TQZkABkQgDwyIG2TARnAHxFAnlbaXBmQfjIgAyhAAPK00ubKgPSTARnAHxFAnlbaXBmQfjIgAyhAAPIYPW+bDMgA/ogA8siAtE0GZAAFCEAeo+dtSylATp48WVrgjwggTyttbit94NhSCpDDhw+XFihAAPK00ua20geOLaUA2bhxY2mBpdgB8rTS5rbSB44tpQDZvHlzaYGL0QHkaaXNbaUPHJsMyACWYgfI00qbKwPSTwZkABejA8jTSpsrA9JPBmQAGRCAPDIgbZMBGUAGBCCPDEjbZEAGkAEByCMD0jYZkAFkQADyyIC0TQZkABkQgDwyIG2TARlABgQgjwxI22RABti+fXsBIEcrba4MSD8ZkAEMowHkaaXNlQHpl1KA3HDDDaUFe/bsKQDkaKXN9Y/XfikFyKZNm0oLDKMB5GmlzZUB6ZdSgBw/fry0QAYEIE8rbW4rfeDYUgqQEydOlBYYRgPI00qb20ofODYZkAFkQADytNLmttIHjk0GZAAZEIA8rbS5rfSBY5MBGUAGBCCPDEjbZEAGkAEByCMD0jYZkAE++eSTAkCOVtpcGZB+MiADnD59ugCQo5U2VwaknwzIAPfcc08BIEcrba4MSD8ZkAHWrVtXAMjRSpsrA9JPBmQAGRCAPDIgbZMBGUAGBCCPDEjbZEAGkAEByCMD0jYZkAFkQADyyIC0LaUAaeVSxDIgAHlaaXNb6QPHllKAtLKanQwIQJ5W2lyraPdbc/acMrHDhw+PWgGuWbPmvMeOHTtWAGCoG2+88bzHxuwax+4DW5EyAuIqsgCsVvrAfr/aeU6Z2Nq1a0cNE+3ateu8x1544YUytQ8//LBs3bp1/v6hQ4d6t3/66afy8ccfl6NHj5YtW7aMth1/xDfffHP3M+ZGx9qO9/niiy+64c7rr79+tO0QQ4/xe9mzZ89o2/v27Stff/11ueaaa8qGDRtG245jx99pvNf+/ftH247f9TfffFNuuummcvXVV4+2vZS/xaHb/nb97S63v916f0ovvfTSeY+N2TWO3Qe2ImUKZmymYAAYy9RTMPRLmYKJ+S8AWI30gf1kQABgQvrAftYBAYAJ6QP7WQcEACakD+wnAwIAE9IH9pMBAYAJ6QP7yYAAwIT0gf1kQABgQvrAfjIgADAhfWA/GRAAmJA+sF9KAZKxlj8ALEf6wH4pBcj69esLAKxG+sB+KQVIXN0QAFYjfWC/lAJkbm6uAMBqpA/sJwMCABPSB/aTAQGACekD+8mAAMCE9IH9ZEAAYEL6wH4yIAAwIX1gPxkQAJiQPrCfDAgATEgf2E8GBAAmpA/sJwMCABPSB/aTAQGACekD+605e06ZWMx/jVkBrlmzpgDAVMbsGsfuA1shAwIAE9IH9ksZATlz5kxZu3ZtGYsREACmNGbXOHYf2IqUAmRsChAAprQCu8YVJ2UK5sCBAwUAViN9YL+rSoIYfhqTyhSAlWLsPrAVKzIDAgArhT6w34rMgAAAK5sMCABMSB/YL6UAMf8FwGqlD+wnAwIAE9IH9pMBAQDSyYAAwIT0gf1kQABgQvrAfjIgADAhfWA/GRAAIJ0MCABMSB/YTwYEACakD+xnCgYASJcyAgIAMCulANm7d28BgNVIH9jPCAgAkE4GBABIZwQEAEj3q53nlInF/NemTZvm7584cWJJ2z///HPZt29fOXnyZLnuuusm356bm+vO1/7xxx/Lxo0bJ9+O9z148GD3Oa699trJt48fP14OHTrU/Z7Xr18/+fbhw4fLt99+260AuG7durTteO94LD5LPDb1dvy/vOqqq7r/t0eOHJl8+1K+S5e6nfXdq9tZ3726nfXdq9tZ3726nf3dq9tZ3726nfXdq9uX8l2q9/kfUzAAQDpTMABAOgUIAJBOAQIApFOAAADpFCAAQDoFCACQTgECAKRTgAAA6RQgAEA6BQgAkE4BAgCkU4AAAOkUIABAOgUIAJBOAQIApFOAAADpFCAAQDoFCACQTgECAKRTgAAA6RQgAEA6BQgAkE4BAgCkU4AAAOn+P214gQ4TE6coAAAAAElFTkSuQmCC"},422:function(e,t,a){e.exports=a.p+"assets/img/box-example.7a24d3e6.png"},572:function(e,t,a){"use strict";a.r(t);var s=a(56),o=Object(s.a)({},(function(){var e=this,t=e.$createElement,s=e._self._c||t;return s("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[s("h1",{attrs:{id:"the-css-box-model"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#the-css-box-model"}},[e._v("#")]),e._v(" The CSS Box Model")]),e._v(" "),s("p",[e._v("In this lecture we'll be talking about a "),s("em",[e._v("very")]),e._v(" important concept in CSS: the "),s("em",[e._v("box model")]),e._v(".")]),e._v(" "),s("h2",{attrs:{id:"what-is-the-box-model"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#what-is-the-box-model"}},[e._v("#")]),e._v(" What is the box model?")]),e._v(" "),s("p",[e._v("The box model is essentially how CSS determines the overall size and shape of an element on the page.")]),e._v(" "),s("p",[e._v('The box model is made up of four components: the content area, the box padding, the box borders, and the box margins. These combine together to create the "box" for a given element.')]),e._v(" "),s("p",[e._v("There are actually "),s("em",[e._v("two")]),e._v(" box models in CSS — the "),s("em",[e._v("standard")]),e._v(" box model, and the "),s("em",[e._v("alternative")]),e._v(" box model — which combine these components in different ways.")]),e._v(" "),s("p",[e._v("Let's start by looking at the standard box model.")]),e._v(" "),s("h3",{attrs:{id:"the-standard-box-model"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#the-standard-box-model"}},[e._v("#")]),e._v(" The standard box model")]),e._v(" "),s("p",[e._v("When working with the standard box model, the "),s("code",[e._v("height")]),e._v(" and "),s("code",[e._v("width")]),e._v(" properties for a given element change the size of the content area.")]),e._v(" "),s("p",[e._v("What exactly does this mean?")]),e._v(" "),s("p",[e._v("Let's look at this diagram of the CSS box model below:")]),e._v(" "),s("p",[s("img",{attrs:{src:a(421),alt:"The CSS box model."}})]),e._v(" "),s("p",[e._v("As we can see, the content area doesn't include the padding for the element, or the borders, or the margins. This is really important to understand, because it means that if you want something to take up "),s("code",[e._v("300px")]),e._v(" of horizontal space, it's not enough to just set the "),s("code",[e._v("width")]),e._v(" to "),s("code",[e._v("300px")]),e._v(".")]),e._v(" "),s("p",[e._v("Instead, we have to set the "),s("code",[e._v("width")]),e._v(" to "),s("code",[e._v("300px")]),e._v(" minus the left and right border width, minus the total horizontal padding.")]),e._v(" "),s("p",[e._v("Let's say our element has a "),s("code",[e._v("1px")]),e._v(" border on all sides, "),s("code",[e._v("10px")]),e._v(" of left padding and "),s("code",[e._v("20px")]),e._v(" of right padding. The code for that might look like this:")]),e._v(" "),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[s("span",{pre:!0,attrs:{class:"token selector"}},[e._v(".box-example")]),e._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("{")]),e._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[e._v("padding-left")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(":")]),e._v(" 10px"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(";")]),e._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[e._v("padding-right")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(":")]),e._v(" 20px"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(";")]),e._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[e._v("border")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(":")]),e._v(" 1px solid #000"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(";")]),e._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("}")]),e._v("\n")])])]),s("p",[e._v("If we want out element to be "),s("code",[e._v("300px")]),e._v(" wide, what should the "),s("code",[e._v("width")]),e._v(" be set to?")]),e._v(" "),s("div",{staticClass:"language- extra-class"},[s("pre",{pre:!0,attrs:{class:"language-text"}},[s("code",[e._v("300px - (2 x 1px) - 10px - 20px\n")])])]),s("p",[e._v("The total comes out to "),s("code",[e._v("268px")]),e._v(".")]),e._v(" "),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[s("span",{pre:!0,attrs:{class:"token selector"}},[e._v(".box-example")]),e._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("{")]),e._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[e._v("width")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(":")]),e._v(" 268px"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(";")]),e._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[e._v("padding-left")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(":")]),e._v(" 10px"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(";")]),e._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[e._v("padding-right")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(":")]),e._v(" 20px"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(";")]),e._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[e._v("border")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(":")]),e._v(" 1px solid #000"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(";")]),e._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("}")]),e._v("\n")])])]),s("p",[e._v("We can go into our developer tools and make sure this all worked correctly. If we hover over the element with the "),s("code",[e._v("box-example")]),e._v(" class, we should see a little box pop up which looks like this:")]),e._v(" "),s("p",[s("img",{attrs:{src:a(422),alt:"The CSS box model."}})]),e._v(" "),s("p",[e._v("The element has "),s("code",[e._v("300px")]),e._v(" of width, as expected, and "),s("code",[e._v("2px")]),e._v(" of height, due to the top and bottom border.")]),e._v(" "),s("p",[e._v("The margins are not included in this size calculation, so if you set the "),s("code",[e._v("margin")]),e._v(" property to, say, "),s("code",[e._v("10px")]),e._v(", the developer tools will still show you the same measurements.")]),e._v(" "),s("h3",{attrs:{id:"the-alternative-box-model"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#the-alternative-box-model"}},[e._v("#")]),e._v(" The alternative box model")]),e._v(" "),s("p",[e._v("All of these calculations are really fiddly, and to remedy this, an alternative to the standard box model was introduced.")]),e._v(" "),s("p",[e._v("In the alternative box model, the "),s("code",[e._v("height")]),e._v(" and "),s("code",[e._v("width")]),e._v(" properties determine the dimensions of the box to the outside of the border. This means the value we set for the "),s("code",[e._v("width")]),e._v(" and "),s("code",[e._v("height")]),e._v(" determine the overall width and height of an element, barring the margins.")]),e._v(" "),s("p",[e._v("We can tell CSS to use the alternative box model for a given element by setting the "),s("code",[e._v("box-sizing")]),e._v(" property for that element, giving it a value of "),s("code",[e._v("border-box")]),e._v(".")]),e._v(" "),s("p",[e._v("I recommend you use "),s("code",[e._v("border-box")]),e._v(" sizing for "),s("em",[e._v("all")]),e._v(" of your elements, but unfortunately it's not an inherited property, so we need to be a little clever about how we do this. We don't want to have to manually specify "),s("code",[e._v("box-sizing")]),e._v(" for every single element on the page, after all!")]),e._v(" "),s("p",[e._v("What we can do instead, is this:")]),e._v(" "),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[s("span",{pre:!0,attrs:{class:"token selector"}},[e._v("*,\n*::before,\n*::after")]),e._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("{")]),e._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[e._v("box-sizing")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(":")]),e._v(" inherit"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(";")]),e._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("}")]),e._v("\n\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[e._v("body")]),e._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("{")]),e._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[e._v("box-sizing")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(":")]),e._v(" border-box"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(";")]),e._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("}")]),e._v("\n")])])]),s("p",[e._v("Here we're using the universal selector to set the "),s("code",[e._v("box-sizing")]),e._v(" property for every element to "),s("code",[e._v("inherit")]),e._v(". We can then set the "),s("code",[e._v("box-sizing")]),e._v(" property for the "),s("code",[e._v("<body>")]),e._v(" element. "),s("code",[e._v("<body>")]),e._v(" is the parent of all of the visual elements on the page, which means the "),s("code",[e._v("boder-box")]),e._v(" value can be inherited throughout the entire document.")]),e._v(" "),s("div",{staticClass:"custom-block tip"},[s("p",{staticClass:"custom-block-title"},[e._v("Why use inherit?")]),e._v(" "),s("p",[e._v("Some of you may be wondering, why not just do something like this:")]),e._v(" "),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[s("span",{pre:!0,attrs:{class:"token selector"}},[e._v("*,\n*::before,\n*::after")]),e._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("{")]),e._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[e._v("box-sizing")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(":")]),e._v(" border-box"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(";")]),e._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("}")]),e._v("\n")])])]),s("p",[e._v("There are two main reasons.")]),e._v(" "),s("ol",[s("li",[s("p",[e._v("Setting an explicit "),s("code",[e._v("box-sizing")]),e._v(" value means we can't use inheritance later on in cases where we want to switch back to the standard box model.")])]),e._v(" "),s("li",[s("p",[e._v("Using "),s("code",[e._v("*")]),e._v(" to set "),s("code",[e._v("box-sizing")]),e._v(" to "),s("code",[e._v("border-box")]),e._v(" universally has a wider reaching effect than inheriting from the "),s("code",[e._v("<body>")]),e._v(" element. For example, the "),s("code",[e._v("<html>")]),e._v(" element and everything in the "),s("code",[e._v("<head>")]),e._v(" would have their "),s("code",[e._v("box-sizing")]),e._v(" set.")])])])]),e._v(" "),s("h2",{attrs:{id:"block-vs-inline-boxes"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#block-vs-inline-boxes"}},[e._v("#")]),e._v(" Block vs inline boxes")]),e._v(" "),s("p",[e._v("The picture we've been painting so far isn't entirely complete, as we've only really discussed the box model for elements being displayed as "),s("em",[e._v("blocks")]),e._v(". For inline elements, the story is a little different.")]),e._v(" "),s("p",[e._v("For example, when working with an inline element, we can't set an explicit height and width. The size of the content determines the size of the content box. Any "),s("code",[e._v("height")]),e._v(" and "),s("code",[e._v("width")]),e._v(" properties will be ignored.")]),e._v(" "),s("p",[e._v("We also can't create space above and below an element by applying vertical padding and margins. Only horizontal padding and margins will move the content around the element. The same is true of borders.")]),e._v(" "),s("p",[e._v("While vertical padding has no effect on the layout of an inline element in relation to those around it, the padding value is still being applied. This is important to note, as vertical padding will change the position of borders around an inline element. The background will also stretch to fill the space specified by the vertical padding.")]),e._v(" "),s("h2",{attrs:{id:"beyond-sizing"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#beyond-sizing"}},[e._v("#")]),e._v(" Beyond sizing")]),e._v(" "),s("p",[e._v("It's worth spending the time to get familiar with the components of the box model, even if you plan to always set the "),s("code",[e._v("box-sizing")]),e._v(" to "),s("code",[e._v("border-box")]),e._v(", as these components are used to determine the effect of other properties.")]),e._v(" "),s("p",[e._v("For example, the "),s("code",[e._v("background-origin")]),e._v(" property allows us to determine where the background ends. We can set values like "),s("code",[e._v("border-box")]),e._v(", "),s("code",[e._v("padding-box")]),e._v(", and "),s("code",[e._v("content-box")]),e._v(", which directly map onto the components of the box model we saw before.")]),e._v(" "),s("p",[e._v("You can find more information on the "),s("code",[e._v("background-origin")]),e._v(" property "),s("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/background-origin",target:"_blank",rel:"noopener noreferrer"}},[e._v("here"),s("OutboundLink")],1),e._v(".")])])}),[],!1,null,null,null);t.default=o.exports}}]);