Sizing elements

Since every element has a box model, things get a little tricker when it comes to sizing.

For example, say we have a box <div> element:

<body>
  <div class="box"></div>
</body>

.box {
  /* define width and height for 200px each */
  width: 200px;
  height: 200px;

  /* define the color of the box */
  background-color: gold;

  /* add 20px padding and border */
  padding: 20px;
  border: 20px solid orange;
}

When you inspect the box in the browser, it turns out that the size of the box is 280x280 instead of 200x200.

The reason for that is because width and height you defined indicates content box, it doesn’t take padding and border into account. (Margin doesn’t affect the actual size)

To address this issue, we can use box-sizing property, which by default is set to content-box.

.box {
  box-sizing: border-box;
}

Note: if you want to apply this rule to all box elements, you can use universal selector, i.e. * However, * doesn’t apply to Pseudo-element, i.e. ::before, ::after so you have to manually include them.

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

Another triky issue is that <div> is a block-level element, which means if 2 boxes are created, they will not be arranged onto a single line.

If we change <div> to a inline element, i.e.<span>:

<body>
  <span class="box"></span>
  <span class="box"></span>
</body>

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

/* a 200x200 gold box */
.box {
  width: 200px;
  height: 200px;
  background-color: gold;
}

/* some text inside the box */
.box::before {
  content: "hello";
}

The <span> will disrespect the width and height, this is because display property of <span> is set to inline by default. (For <div> is set to block)

We can add and set display to a third value, inline-block to make it inline, but also has block property.

.box {
  display: inline-block;
}

Note: you can delete the space between 2 <span> to make 2 boxes adjacent to each other:

<body>
  <span class="box"></span>
	<span class="box"></span>
</body>