{"id":5669,"date":"2017-11-20T08:46:14","date_gmt":"2017-11-20T13:46:14","guid":{"rendered":"http:\/\/local.brightwhiz\/?p=5669"},"modified":"2021-12-07T16:47:43","modified_gmt":"2021-12-07T21:47:43","slug":"css-box-sizing-resizing-elements","status":"publish","type":"post","link":"http:\/\/local.brightwhiz\/css-box-sizing-resizing-elements\/","title":{"rendered":"CSS Box-Sizing to Stop Padding and Borders From Resizing Elements"},"content":{"rendered":"\n

This is why we will be discussing the CSS<\/a> box-sizing property. If you are not a complete expert at CSS, it could prevent you from earning premature gray hairs out of frustration.<\/p>\n\n\n\n

Yes, CSS has a way of frustrating the hell out of designers, when they try to achieve seemingly simple tasks and things don’t seem to want to play nice.<\/p>\n\n\n\n

One such task is trying to keep element sizes while using the CSS padding property effectively.<\/p>\n\n\n\n

Here’s the problem. By default, the CSS padding property adds white space into an HTML<\/a> element totally disregarding the set sizes.<\/p>\n\n\n\n

For example, if you set a box 100px by 100px. then add padding of 10 pixels on each side, you will end up with a box that is 120px by 120px in size. To make it worse, should you increase the border thickness, then the problem just compounds.<\/p>\n\n\n\n

One way to deal with this is to simply offset the element size to accommodate the padding and the border thickness. This is not an elegant solution to be honest unless you have a calculator on standby.<\/p>\n\n\n\n

Enter box-sizing to the Rescue<\/h2>\n\n\n\n

By using the default box-sizing property on the element, you as the designer have the power to have more control over the correct sizing you need on the said element.<\/p>\n\n\n\n

With this property, you can choose to leave the default behavior and leave the element to grow beyond your defined width and height. One such reason you might want to keep the default behavior is when you are adding padding and border around an image.<\/p>\n\n\n\n

In this case, you might not want to distort the image and you might want to keep the aspect ratio and the defined size. You can explicitly set this by defining a box model that takes the box-sizing value as content-box.<\/p>\n\n\n\n

However, if you need to keep the defined width and height regardless of how much padding and border thickness you employ then there is no choice but to get the extra space taken up by the padding and border from the content.<\/p>\n\n\n\n

This can be achieved by defining a box model with takes the box-sizing value as border-box. The illustration below shows the effects of using both content-box and border-box.<\/p>\n\n\n\n

\"\"
Content-box vs Border-box<\/figcaption><\/figure>\n\n\n\n

There are several more CSS tricks that come into play when you are dealing with padding, margin, and border properties to achieve some unexpected visual effects.<\/p>\n\n\n\n

Understanding CSS properly is when you will have the power to leverage some of these techniques. So don’t be left behind but find out more interesting upcoming tips and tricks on this website.<\/p>\n\n\n\n

Ref: [ 1<\/a> ]<\/p>\n","protected":false},"excerpt":{"rendered":"

This is why we will be discussing the CSS box-sizing property. If you are not a complete expert at CSS, it could prevent you from earning premature gray hairs out…<\/p>\n","protected":false},"author":1,"featured_media":5672,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,23,16,17],"tags":[106,170,303,319,471,543,635,637,638],"yoast_head":"\nBox-Sizing CSS, Stop CSS Padding and Border From Resizing Elements<\/title>\n<meta name=\"description\" content=\"This is how you can use CSS box-sizing property to stop CSS padding property and CSS border property from resizing elements\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"http:\/\/local.brightwhiz\/css-box-sizing-resizing-elements\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Box-Sizing CSS, Stop CSS Padding and Border From Resizing Elements\" \/>\n<meta property=\"og:description\" content=\"This is how you can use CSS box-sizing property to stop CSS padding property and CSS border property from resizing elements\" \/>\n<meta property=\"og:url\" content=\"http:\/\/local.brightwhiz\/css-box-sizing-resizing-elements\/\" \/>\n<meta property=\"og:site_name\" content=\"Brightwhiz.com\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/brightwhiz\/\" \/>\n<meta property=\"article:published_time\" content=\"2017-11-20T13:46:14+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-12-07T21:47:43+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2017\/11\/box-sizing.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Michael Bright\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@brightwhizmag\" \/>\n<meta name=\"twitter:site\" content=\"@brightwhizmag\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Michael Bright\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"http:\/\/local.brightwhiz\/css-box-sizing-resizing-elements\/#article\",\"isPartOf\":{\"@id\":\"http:\/\/local.brightwhiz\/css-box-sizing-resizing-elements\/\"},\"author\":{\"name\":\"Michael Bright\",\"@id\":\"http:\/\/local.brightwhiz\/#\/schema\/person\/81f0f3126f13834ae2e7f381b3028e32\"},\"headline\":\"CSS Box-Sizing to Stop Padding and Borders From Resizing Elements\",\"datePublished\":\"2017-11-20T13:46:14+00:00\",\"dateModified\":\"2021-12-07T21:47:43+00:00\",\"mainEntityOfPage\":{\"@id\":\"http:\/\/local.brightwhiz\/css-box-sizing-resizing-elements\/\"},\"wordCount\":449,\"publisher\":{\"@id\":\"http:\/\/local.brightwhiz\/#organization\"},\"image\":{\"@id\":\"http:\/\/local.brightwhiz\/css-box-sizing-resizing-elements\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2017\/11\/box-sizing.jpg\",\"keywords\":[\"Browsers\",\"CSS\",\"HTML\",\"Interactive Technics\",\"Programming\",\"Software Design\",\"Web\",\"Web Design\",\"Web Development\"],\"articleSection\":[\"Articles\",\"Guides\",\"Technology\",\"Tips\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"http:\/\/local.brightwhiz\/css-box-sizing-resizing-elements\/\",\"url\":\"http:\/\/local.brightwhiz\/css-box-sizing-resizing-elements\/\",\"name\":\"Box-Sizing CSS, Stop CSS Padding and Border From Resizing Elements\",\"isPartOf\":{\"@id\":\"http:\/\/local.brightwhiz\/#website\"},\"primaryImageOfPage\":{\"@id\":\"http:\/\/local.brightwhiz\/css-box-sizing-resizing-elements\/#primaryimage\"},\"image\":{\"@id\":\"http:\/\/local.brightwhiz\/css-box-sizing-resizing-elements\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2017\/11\/box-sizing.jpg\",\"datePublished\":\"2017-11-20T13:46:14+00:00\",\"dateModified\":\"2021-12-07T21:47:43+00:00\",\"description\":\"This is how you can use CSS box-sizing property to stop CSS padding property and CSS border property from resizing elements\",\"breadcrumb\":{\"@id\":\"http:\/\/local.brightwhiz\/css-box-sizing-resizing-elements\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\/\/local.brightwhiz\/css-box-sizing-resizing-elements\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\/\/local.brightwhiz\/css-box-sizing-resizing-elements\/#primaryimage\",\"url\":\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2017\/11\/box-sizing.jpg\",\"contentUrl\":\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2017\/11\/box-sizing.jpg\",\"width\":1200,\"height\":630,\"caption\":\"Box-sizing\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"http:\/\/local.brightwhiz\/css-box-sizing-resizing-elements\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"http:\/\/local.brightwhiz\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS Box-Sizing to Stop Padding and Borders From Resizing Elements\"}]},{\"@type\":\"WebSite\",\"@id\":\"http:\/\/local.brightwhiz\/#website\",\"url\":\"http:\/\/local.brightwhiz\/\",\"name\":\"Brightwhiz.com\",\"description\":\"Best Tech guides, Tutorials, and News\",\"publisher\":{\"@id\":\"http:\/\/local.brightwhiz\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"http:\/\/local.brightwhiz\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"http:\/\/local.brightwhiz\/#organization\",\"name\":\"Brightwhiz\",\"url\":\"http:\/\/local.brightwhiz\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\/\/local.brightwhiz\/#\/schema\/logo\/image\/\",\"url\":\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2021\/11\/brightwhiz-com-logo-orange.png\",\"contentUrl\":\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2021\/11\/brightwhiz-com-logo-orange.png\",\"width\":706,\"height\":135,\"caption\":\"Brightwhiz\"},\"image\":{\"@id\":\"http:\/\/local.brightwhiz\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/brightwhiz\/\",\"https:\/\/twitter.com\/brightwhizmag\",\"https:\/\/instagram.com\/bright_whiz\/\",\"https:\/\/www.pinterest.com\/sobbayi\/\",\"https:\/\/www.youtube.com\/channel\/UC6sCdP_d_RiTIM7ErFT-PSQ\"]},{\"@type\":\"Person\",\"@id\":\"http:\/\/local.brightwhiz\/#\/schema\/person\/81f0f3126f13834ae2e7f381b3028e32\",\"name\":\"Michael Bright\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\/\/local.brightwhiz\/#\/schema\/person\/image\/\",\"url\":\"http:\/\/1.gravatar.com\/avatar\/da90485875ff0aafa38fdd494abe87d1?s=96&d=mm&r=g\",\"contentUrl\":\"http:\/\/1.gravatar.com\/avatar\/da90485875ff0aafa38fdd494abe87d1?s=96&d=mm&r=g\",\"caption\":\"Michael Bright\"},\"sameAs\":[\"https:\/\/sobbayi.com\"],\"url\":\"http:\/\/local.brightwhiz\/author\/sobbayiadmin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Box-Sizing CSS, Stop CSS Padding and Border From Resizing Elements","description":"This is how you can use CSS box-sizing property to stop CSS padding property and CSS border property from resizing elements","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"http:\/\/local.brightwhiz\/css-box-sizing-resizing-elements\/","og_locale":"en_US","og_type":"article","og_title":"Box-Sizing CSS, Stop CSS Padding and Border From Resizing Elements","og_description":"This is how you can use CSS box-sizing property to stop CSS padding property and CSS border property from resizing elements","og_url":"http:\/\/local.brightwhiz\/css-box-sizing-resizing-elements\/","og_site_name":"Brightwhiz.com","article_publisher":"https:\/\/www.facebook.com\/brightwhiz\/","article_published_time":"2017-11-20T13:46:14+00:00","article_modified_time":"2021-12-07T21:47:43+00:00","og_image":[{"width":1200,"height":630,"url":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2017\/11\/box-sizing.jpg","type":"image\/jpeg"}],"author":"Michael Bright","twitter_card":"summary_large_image","twitter_creator":"@brightwhizmag","twitter_site":"@brightwhizmag","twitter_misc":{"Written by":"Michael Bright","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"http:\/\/local.brightwhiz\/css-box-sizing-resizing-elements\/#article","isPartOf":{"@id":"http:\/\/local.brightwhiz\/css-box-sizing-resizing-elements\/"},"author":{"name":"Michael Bright","@id":"http:\/\/local.brightwhiz\/#\/schema\/person\/81f0f3126f13834ae2e7f381b3028e32"},"headline":"CSS Box-Sizing to Stop Padding and Borders From Resizing Elements","datePublished":"2017-11-20T13:46:14+00:00","dateModified":"2021-12-07T21:47:43+00:00","mainEntityOfPage":{"@id":"http:\/\/local.brightwhiz\/css-box-sizing-resizing-elements\/"},"wordCount":449,"publisher":{"@id":"http:\/\/local.brightwhiz\/#organization"},"image":{"@id":"http:\/\/local.brightwhiz\/css-box-sizing-resizing-elements\/#primaryimage"},"thumbnailUrl":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2017\/11\/box-sizing.jpg","keywords":["Browsers","CSS","HTML","Interactive Technics","Programming","Software Design","Web","Web Design","Web Development"],"articleSection":["Articles","Guides","Technology","Tips"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"http:\/\/local.brightwhiz\/css-box-sizing-resizing-elements\/","url":"http:\/\/local.brightwhiz\/css-box-sizing-resizing-elements\/","name":"Box-Sizing CSS, Stop CSS Padding and Border From Resizing Elements","isPartOf":{"@id":"http:\/\/local.brightwhiz\/#website"},"primaryImageOfPage":{"@id":"http:\/\/local.brightwhiz\/css-box-sizing-resizing-elements\/#primaryimage"},"image":{"@id":"http:\/\/local.brightwhiz\/css-box-sizing-resizing-elements\/#primaryimage"},"thumbnailUrl":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2017\/11\/box-sizing.jpg","datePublished":"2017-11-20T13:46:14+00:00","dateModified":"2021-12-07T21:47:43+00:00","description":"This is how you can use CSS box-sizing property to stop CSS padding property and CSS border property from resizing elements","breadcrumb":{"@id":"http:\/\/local.brightwhiz\/css-box-sizing-resizing-elements\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["http:\/\/local.brightwhiz\/css-box-sizing-resizing-elements\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/local.brightwhiz\/css-box-sizing-resizing-elements\/#primaryimage","url":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2017\/11\/box-sizing.jpg","contentUrl":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2017\/11\/box-sizing.jpg","width":1200,"height":630,"caption":"Box-sizing"},{"@type":"BreadcrumbList","@id":"http:\/\/local.brightwhiz\/css-box-sizing-resizing-elements\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"http:\/\/local.brightwhiz\/"},{"@type":"ListItem","position":2,"name":"CSS Box-Sizing to Stop Padding and Borders From Resizing Elements"}]},{"@type":"WebSite","@id":"http:\/\/local.brightwhiz\/#website","url":"http:\/\/local.brightwhiz\/","name":"Brightwhiz.com","description":"Best Tech guides, Tutorials, and News","publisher":{"@id":"http:\/\/local.brightwhiz\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/local.brightwhiz\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"http:\/\/local.brightwhiz\/#organization","name":"Brightwhiz","url":"http:\/\/local.brightwhiz\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/local.brightwhiz\/#\/schema\/logo\/image\/","url":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2021\/11\/brightwhiz-com-logo-orange.png","contentUrl":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2021\/11\/brightwhiz-com-logo-orange.png","width":706,"height":135,"caption":"Brightwhiz"},"image":{"@id":"http:\/\/local.brightwhiz\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/brightwhiz\/","https:\/\/twitter.com\/brightwhizmag","https:\/\/instagram.com\/bright_whiz\/","https:\/\/www.pinterest.com\/sobbayi\/","https:\/\/www.youtube.com\/channel\/UC6sCdP_d_RiTIM7ErFT-PSQ"]},{"@type":"Person","@id":"http:\/\/local.brightwhiz\/#\/schema\/person\/81f0f3126f13834ae2e7f381b3028e32","name":"Michael Bright","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/local.brightwhiz\/#\/schema\/person\/image\/","url":"http:\/\/1.gravatar.com\/avatar\/da90485875ff0aafa38fdd494abe87d1?s=96&d=mm&r=g","contentUrl":"http:\/\/1.gravatar.com\/avatar\/da90485875ff0aafa38fdd494abe87d1?s=96&d=mm&r=g","caption":"Michael Bright"},"sameAs":["https:\/\/sobbayi.com"],"url":"http:\/\/local.brightwhiz\/author\/sobbayiadmin\/"}]}},"_links":{"self":[{"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/posts\/5669"}],"collection":[{"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/comments?post=5669"}],"version-history":[{"count":0,"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/posts\/5669\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/media\/5672"}],"wp:attachment":[{"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/media?parent=5669"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/categories?post=5669"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/tags?post=5669"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}