• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

My Monkey Do

A Log of Coding Solutions

  • Home
  • Web Hosts
  • Tools
  • About

What is box-sizing and border-box?

August 24, 2013 by Webhead

Problem

In the latest WordPress theme, twentythirteen, I noticed styles that had padding didn’t affect the width of my box.  Whenever I add padding, the inside just got smaller and the outside stayed the same.  Was I dreaming all this time thinking the padding affected the overall width?  What world was I living in where you say this div is 100px wide, but if there’s 10px padding on each side the width should actually be 80px?

Solution

No, I wasn’t dreaming.  The WordPress twentythirteen theme has a style called

box-sizing:border-box

.  This causes the width to stay the width and the padding to be on the inside and not affect the width.  This is amazingly supported in IE 8 and up, and, with some prefixes, webkit and firefox.    I will always be using the below code from now on.

* {
 position: relative;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}

Filed Under: Coding Tagged With: css, wordpress

Primary Sidebar

Topics

apache apple block editor chrome cms css debug eCommerce embed firebug firefox git gmail goDaddy google hosting htaccess html html 5 IE crap image iPad iPhone javascript jquery linux localization mac os x ms sql mysql open source optimize php php 5.3 responsive rest api seo svg tinymce woocommerce wordpress wpengine xss yii youtube




Categories

  • Coding
  • Off the Shelf
  • Plugins
  • Random Thoughts
  • Server Stuff
  • Tools