HTML & CSS
Article
By Guy Routledge

AtoZ CSS Quick Tip: Box-Model and Box-Sizing

By Guy Routledge

This article is a part of our AtoZ CSS Series. You can find other entries to the series here.
View the full screencast and transcript for box-model here.

Welcome to our AtoZ CSS series! In this series I’ll be exploring different CSS values (and properties) beginning with a letter from the alphabet. We know that sometimes screencasts are just not enough, in this article I’ve added a new quick tip/lesson about the box-model property for you.

css-B1-01

B is for box-model

Every element on a webpage is a box. The properties of the box can be described as the box-model. In this tip, I’ll be taking you through a “new and improved” approach for adjusting the box sizing so it seamlessly works across a whole project. This involves working with the width, height, margin, padding and border of the box.

If you chose to use box-sizing: border-box across your site (you should) you can run into problems when you add widgets/plugins that use the default content-box sizing model.

To get around any display issues, use the following snippet instead of * { box-sizing: border-box }:

html {
  box-sizing: border-box;
}

*, *:before, *:after { box-sizing: inherit; }

This is currently considered the best practice for applying box-sizing across a project although with the always changing nature of front-end development, who knows how long that might last!

If you want to read more about this tip, check out the following articles:

More:
  • Daniel Lidström

    Hmm, couldn’t you have combined this with your other article?

    • Angela Molina

      The other is a direct transcript of the screencast published. This is a bonus tip for the series. :)

  • Your every article is so informative and so useful many thanks for sharing hope will get new one soon.

  • Jonathan Hamilton

    I like the comparisons of the tools. However the title bugs me, it should be “which will help you create better mock ups/designs/concepts/prototypes” as you don’t mention UX in the comparisons at all, UX is not UI design.

    • skitchbeatz

      UX includes UI… but yes.. some evaluation was left out

  • joshua hardy carroll

    One huge advantage of Sketch it’s integration with Flinto. This allows for complex interactive prototypes with full animation that can easily be modified. XD has some of this ability, but nowhere near as good a result. Sketch is better at this point, but XD is catching up. As for Affinity, I don’t use Illustrator o regards Fireworks at all now. Designer is far superior.

  • Don Droga

    What do you have the most fun using? For me it’s Sketch. It’s lightweight but powerful. You can integrated with InVision and other prototyping software. You are not glued into the Adobe ecosystem.

  • NCode Technologies

    Is there any specific benefit of Sketch which is not offered by Adobe XD? If there are any, it would be great to choose Sketch.

  • Amit Vijayvergiya

    JavaTpoint

  • Logavani G

    hi welcome to this blog. really you have post an informative blog. it will be helpful to many peoples. thank you for sharing this blog. before i read this blog i didn’t have any knowledge about this but now i got some knowledge.

  • Luis Escorial

    I just reviewed Xd since it came up. I am a Sketch user, and when Adobe launched Xd beta it didn’t impressed me at all. As a matter of fact it felt like a bloated program that was trying to copy what Sketch was offering.
    Today; don’t know why, I went back to review Xd. I am not sure what implementations they have done, but for some reason it felt way, way better that what I remember.

    i found that many of the pet peeves I have with Sketch; regarding use and process, worked better on Xd (maybe because I am used to work on Adobe environment for everything else). Most of the articles I’ve read about comparing both are from last year. Any good updates you may have now?. I am not trying to bring the old debate with hardcore defenders from both sides, I want to really hear real experiences from people that are willing to be honest.

    By the way, I use Sketch more for web design than App.

  • samiul

    Thanks your box model is very rear i can’t see this before

    • johnkimak

      lol, what?

  • Nice tutorial. I will use it to my new project. Thanks for sharing.

  • Awesome blog. I am using in my project…..such a wonderful…..i hope you will post as soon as possible with latest update…
    Thanks for sharing :)
    JAVA Training at CETPA

Recommended
Sponsors
Get the latest in Front-end, once a week, for free.