One of the challenges you are likely to encounter when styling your website elements with CSS is that properties like border, padding, and width may be confusing. For instance, you may have noticed that sometimes you may define a size but it will not be correctly applied to the element.
To ensure your elements get styled the exact size you want them, you can make use of box sizing. Box sizing is a simple CSS property that ensures elements are rendered in the exact values you define, even across different browsers.
Understanding CSS Element Rendering
To understand the box model, you should know how width and height are rendered in CSS. The width you specify is usually inclusive of any applied padding or border pixels that the element has. Thus, an element will be the exact size you define if it has 0px border and 0px padding. If there is any padding or border size, the resulting element will be larger than the size you defined.
Therefore, to get an element to be the exact size you want, you need to subtract the border size and padding from the desired size. For instance, if you want a button of 200px but have already applied 20px padding and 1px border, the number you should define in CSS will be 200px less 40px and 2px, which is 158px.
Using the Box Sizing Property
However, instead of having to subtract the padding and borders to get the right size, you can use the box sizing property to get your element shown in the exact size you define. The box sizing property is written as {box-sizing: border-box;}.
Below is an example of using the {box-sizing: border-box;} property in code to define an element of 200px, which has 20px padding and 1px border:
.sidebar { box-sizing: border-box;
width: 200px;
padding: 20px;
border: 1px solid #DDD;}
When you use the box sizing property to define the size of your element, any padding or border associated with the element will not be considered during rendering. Box sizing works in most browsers, going back as far as IE8.
690 total views, 11 views today
About Ajay Prasad
Ajay Prasad is the President and Founder of Global Marketing Resources, LLC, which runs a number of Internet strategy and e-commerce companies under its umbrella. Ajay's functional expertise includes website strategy, marketing management, business development, consumer research, market analysis and strategic planning. GMR Website Maintenance focuses on all aspects of Website Maintenance and ensures high quality and efficient website maintenance services, tailored to fit each of our client's needs. Google+
The post Making CSS Layouts Work Intuitively With Box Sizing appeared first on Website Design and Maintenance Service.
