* { Box-Sizing: Border-Box; }:To Border-Box or Not to Border-Box All Elements

* { Box-sizing: border-box; } : To border-box or not to border-box all elements?

I think it is a great idea. In fact I will start doing the same on my websites.

Here Paul talks about using it in that same fashion

http://paulirish.com/2012/box-sizing-border-box-ftw/

We've been using *{box-sizing: border-box;} in one of my projects
(deployed in production, averaging over 1mln visits a month) at work
for about a year now, and it seems to be holding up just fine. The
project has been tested in IE8 & 9 and the latests Firefox and Chrome
versions and we've had no problems. All jQuery (+UI) offset
calculations and animations run fine, even in any element we've
displayed as inline-block. As of late we've started testing the
project on mobile devices (iPhone, iPad and Android) and we've had no
issues regarding box-sizing with any of them yet, so it seems to work
just fine.

I found this to help take care of the issues in IE7

https://github.com/Schepp/box-sizing-polyfill

Is it wrong to use box-sizing: border-box; in universal selector (*) every time?

If you start a new project it might be ok and clean to add * { box sizing: border-box; } at the beginning so you can use it on the entire project and everyone else developing on the project will see it.

BUT if you work on an existing project and then just add * { box sizing: border-box; } somewhere could mess up the entire layout! So there it might be "safer" to only add it to the containers you are working on with something like .border-boxed-container * { box sizing: border-box; }. Or have an extra class like "border-boxed" which you can add to every element accordingly the CSS .border-boxed { box sizing: border-box; }

Why is box-sizing for button border-box by default?

MDN has this to say:

box-sizing - CSS: Cascading Style Sheets | MDN

box-sizing: border-box is the default styling that browsers use for the <table>, <select>, and <button> elements, and for <input> elements whose type is radio, checkbox, reset, button, submit, color, or search.

This is documented in the standards:

CSS Box Sizing Module Level 3

Note: Certain HTML elements, such as button, default to border-box behavior.

So technically, the "why" is because it's what the standards say it should be is expected to be (see Alohci's comment below).

If you want to know why the standards say that, you may be able to find the answer buried in the W3C mailing list archives.

Is there a LI equivalent for box-sizing: border-box?

When working with divs, you can use box-sizing:border-box to get the
borders inside the div.

To clarify, box-sizing:border-box does not make the border to be within the element (change offset), it make the border size be included in the width or height, when set, so i.e. if you give li a height of 25px and bottom border 5px, the inner height will decrease to 20px.

But how can you offset the border on a LI item

You can't offset the border, one workaround to show/hide a border on an element is to use a pseudo element, which will avoid having the element jump/resize when toggle the border, but there are more ways, such as linear-gradient (shown in below sample when hover)

body {

  background: lightgray;

}

nav ul li {

  position: relative;

  float: left;

  padding: 0 5px;

  list-style-type: none;

}

nav ul li.active::before {

  content: '';

  position: absolute;

  left: 0;

  top: 0;

  right: 0;

  bottom: -6px;

  background-color: white;

  border-bottom: solid 6px blue;

  z-index: -1;

}

/*  or one can use linear-gradient  */

nav ul li:hover {

  background: linear-gradient(

    to bottom, white calc(100% - 5px), blue 5px

  ) no-repeat left bottom;

}

<nav>

  <ul>

    <li>

      Some text

    </li>

    <li>

      Some text

    </li>

    <li class="active">

      Some text

    </li>

    <li>

      Some text

    </li>

  </ul>

</nav>

*{ box-sizing: border-box }

I have started to use this almost always.

The Pros,

You do not need to calculate out the CSS box-model anymore.

You can easily add large padding to an object without have to re-fix your height/width

Faster coding of your css (look up SASS if you have not)

The cons,

IE7 and below have no support, who cares right? Some sadly do.

IE8 and up have only partial support.

This is how I go about this if I don't want everything to have it,

div, li, p {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
}

I add the elements that I know will utilize this property and to prevent every object from having that property.

CSS box-sizing: border-box still adding border size to element width

This was actually very simple.

I was missing that the .cont div is 200px with 1px border left and right.

Therefore the .h_row inside it is 198px with box-sizing as used.

Thus the .cell need to add up to 198px and not 200px.

I knew it was something simple - just needed a little help finding it!

-Thanks @ZohirSalak!

how to remove box-sizing:border-box from element

You didn't have a closing bracket after your first selector block, and in the selector block where you're reseting your box-sizing property, you named the class .footContainer instead of .footerContainer

*, ::after, ::before {
    box-sizing: border-box;
}
    
.footerContainer *,.footerContainer ::after, .footerContainer ::before{
  box-sizing:content-box;
 }
    
    
.footerContainer {
    display:flex;
    background-color: #538231;
    padding: 0vw;
    justify-content:space-evenly;
    align-items:center;
    font-size:1vw;
}

.socialMedia a{
    display:flex;
    flex-direction:column;
    color: white;
    border: 0px solid white;
    margin: 1vw;
    justify-content:center;
    align-items:center;
}

.socialMedia a {
    outline: none;
   
    
    color: white;
    text-decoration: none;
}

.fa2 {
    padding: 0 1vw;
    font-size: 2.25vw!important;
    width: 2.5vw;
    text-align: center;
    text-decoration: none;
    margin: 0;
}

#footContainer *,#footConatiner ::after,#footContainer ::before{
    box-sizing:unset;
}

<div class="footerContainer" style="margin-bottom:1vw;box-sizing: unset;">

  <span style="color:white" class="cr">Copyright © 2019, All Rights Reserved, Sustainable Weston Action Group </span>
  <div style="display:flex;justify-content:center;box-sizing: unset;">
    <div id="zero" class="socialMedia" style="
    box-sizing: unset;
">
      <a href="mailto:swag@sustainablewestonma.org">
        <img class="fa2" src="https://www.sustainablewestonma.org/.swag/public/images/mail3-whiteongreen.png">
        <!--Send us an email-->
      </a>
    </div>
    <div id="first" class="socialMedia">
      <a href="https://www.facebook.com/groups/1960906387454685/">
        <img class="fa2" src="https://www.sustainablewestonma.org/.swag/public/images/facebook-square-brands-green.png">
        <!-- Like us on Facebook-->
      </a>
    </div>
    <div id="second" class="socialMedia">
      <a href="https://twitter.com/Weston_SWAG">
        <img style="border:solid 1px white;border-radius:50%" class="fa2" src="https://www.sustainablewestonma.org/.swag/public/images/twitter-square-brands-green.png">
        <!-- Follow us on Twitter-->
      </a>
    </div>
    <div id="third" class="socialMedia">
      <a href="https://instagram.com/sustainablewestonactiongroup/">
        <img class="fa2" src="https://www.sustainablewestonma.org/.swag/public/images/instagram-brands-green.png">
        <!--Follow us on Instagram-->
      </a>
    </div>

  </div>
</div>

Box-sizing does not affect the padding

box-sizing: border-box does force all padding on selected elements to not affect the total size of the element like you mentioned. You are correct. The problem with your code is you were only setting this property on the body element on your first line:

body {
  font-size: 10px;
  box-sizing: border-box; /* this is only affecting the body element */
}

I moved that rule outside of the body selector into a universal selector which selects all elements in the document. This allows your element in question .mid_card to not grow larger when padding is applied.

* {
  box-sizing: border-box; /* moved this rule outside of body to affect all elements */
}
body {
  font-size: 10px;
}
.mid {
  background-color: #f6f9fc;
  margin: 1rem;
  height: 95vh;
}
.mid__card {
  background-color: white;
  margin: 4rem;
  border-radius: 12px;
  border: .1em solid white;
  box-shadow: 0 0.2rem 0.4rem 0.2rem rgba(0, 0, 0, 0.171);
  height: 15rem; /* increased height to avoid clipping */
  width: 40rem;
  padding: 3rem;
}

<body>
  <div class="mid">
    <div class="mid__title">
      <h1 class="mid__title__head">Our Team</h1>
    </div>
    <div class="mid__card">
      <h2 class="mid__card__title">Roger Harry</h2>
      <h3 class="mid__card__subtitle">Founder</h3>
      <p class="mid__card__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum animi magni hic molestias? Et adipisci cum ad doloremque exercitationem corporis error dolorum, voluptatem, dicta tenetur sunt nam explicabo quaerat architecto. Placeat corrupti esse
        debitis, veritatis nihil suscipit voluptates dolorem ab architecto est officiis laboriosam velit, sit dolore fugiat perferendis doloribus totam harum! Autem accusantium placeat fugiat soluta dolorem quidem eaque.
      </p>
      <button class="mid__card__button">LinkedİN</button>
    </div>
  </div>
</body>

---

Related Topics