Let’s master CSS box design!

1.6K

It can be said that understanding the design of “boxes” when decorating HTML with CSS is
essential for designing beautiful pages.

It is possible to copy and use other designs, but it is important for you to understand what settings you should use to make the overall design consistent .

In this article, I will explain the parameters of the box design and introduce a design that looks beautiful.
I hope that when you finish reading it, you will think, “Let’s customize it by yourself, even if just a little.”

Understanding HTML Boxes

HTML elements can be grouped together and treated as a single “box”.
Boxes make page layout much easier.

By setting a class name for tags such as “div” and “span”, you can unify the design as a box.

CSS

div.item {
  width: 100px;
  margin: 5px;
  border: solid 1px #999999;
}

HTML

In the sample, the width, margin, and border color are set in the “item” class of the “div” tag.

Customize the box layout

In this state, it is also possible to enclose the outside with a “div” tag.
Let’s add a new “container” class.

CSS

div.container {
  width: 150px;
  margin: 5px;
  border: solid 1px #999999;
}
div.item {
  width: 100px;
  margin: 5px;
  border: solid 1px #999999;
}

HTML

<div class="container" >
  <div class="item">アイテム1</div>
  <div class="item">アイテム2</div>
  <div class="item">アイテム3</div>
  <div class="item">アイテム4</div>
</div>

The “item” class is displayed inside the “container” class.
This state is called “nesting”.

center the box

If you want the “item” class to be center aligned, setting “text-align: center” will not center it.
By setting the margin to “auto”, you can align it to the center on the left and right.

CSS

div.container {
  width: 150px;
  margin: 5px;
  border: solid 1px #999999;
}
div.item {
  width: 100px;
  border: solid 1px #999999;

  margin-left: auto;     /* 左の余白 */
  margin-right: auto;    /* 右の余白 */
  margin-top:   5px;     /* 上の余白 */
  margin-bottom:5px;     /* 下の余白 */
}

Align nested boxes

You can also display the “item” class side by side.
Let’s change the CSS like this:
The width of the “container” class has also been changed to align them side by side.

CSS

div.container {
  width: 400px;
  margin: 5px;
  border: solid 1px #999999;
  display: flex;
}
div.item {
  width: 100px;
  margin: 5px;
  border: solid 1px #999999;
}

By setting “display: flex;” on the “container” class, you can align the nested “item” classes side by side.

In this way, it becomes easy to design and lay out the page by putting it together as a box.

box components

First, let’s introduce the CSS elements necessary to understand boxes.

We will discuss these elements one by one.

width and height

First of all, the “size” is important in making a box.
Size is specified using width and height.

In this sample, the background color (background-color) is set so that the difference from the background is easy to understand.

CSS

div.rectangle {
  width: 300px;
  height: 200px;
  background-color: #73e6c5;
}

HTML

<div class="rectangle">
  300px × 200pxの枠
</div>

Details on how to specify the width and height are introduced in the following article, so please refer to it if you are interested.

margin

margin represents the padding for the “outside” of the box.
Mainly, set by focusing on how much margin to add from the inner child element to the outer parent element.

Margins can be set individually for the top, bottom, left, and right, or you can specify the same size all at once.
You can also center it by setting the left and right margins with the “auto” keyword.

.margin-area {
  margin-left:  1em; /* 左の余白 */
  margin-right: 1em; /* 右の余白 */
  margin-top:   1em; /* 上の余白 */
  margin-bottom:1em; /* 下の余白 */
}

.margin-all {
  margin: 1em;     
}

Setting example of margin

Here is an example of actually setting the margin.
The boxes are nested, and the margins are set for the boxes inside.

CSS

div.outer {
  display: inline-block;
  background-color:#73e6c5;
}

div.inner {
  display: inline-block;
  background-color: #739be6;
  margin-left: 1em;     /* 左の余白 */
  margin-right: 1em;    /* 右の余白 */
  margin-top: 0.5em;    /* 上の余白 */
  margin-bottom: 0.5em; /* 下の余白 */
}

HTML

<div class="outer">
  <div class="inner">
  </div>
</div>

There is a margin of 1 character (1em) on the left and right, and a margin of 0.5 characters (0.5em) on the top and bottom.
By specifying a margin for the box named inner, which is the inner element, you can create a margin for the outer box named outer.

Adjacent margins cancel out!

When elements with white space specified for margin are lined up, the margin value specified for one element may be offset by the margin value for the other element.
Let’s take a look at a sample.

CSS

p{
  width: 100px;
  height: 30px;
  border: solid 1px gray;
  margin-top: 10px;
  margin-bottom: 15px;
}

HTML

<div>
  <p>first</p>
  <p>second</p>
</div>

Since 10px is specified for margin-top and 15px for margin-bottom, it seems that the total spacing is 25px. However, the margin is only half of the 30px height of the box.
This is due to the property that the margins cancel each other out, and in this case the larger value of 15px was applied.
Be careful when setting margins.

padding

padding specifies the padding for the “inside” of the box.
Mainly, specify when you want to add a margin from the outer parent element to the inner child element.
As with margin, padding can be set individually for top, bottom, left, and right, or all at once.

padding setting example

Here is an example of setting margins using padding.

CSS

div.outer {
  display: inline-block;
  background-color:#73e6c5;
  
  padding-left: 1em;     /* 左の余白 */
  padding-right: 1em;    /* 右の余白 */
  padding-top: 0.5em;    /* 上の余白 */
  padding-bottom: 0.5em; /* 下の余白 */
}

div.inner {
  display: inline-block;
  background-color: #739be6;
}

HTML

<div class="outer">
  <div class="inner">
   
  </div>
</div>

At first glance, it looks like the same result as “margin”, but while margin is specified for the child element, padding is specified for the parent element to achieve the margin.
If you add code to CSS and set padding to the child element, it will create a margin for the characters in the child element.

CSS

div.outer {
  display: inline-block;
  background-color:#73e6c5;
  
  padding-left: 1em;     /* 左の余白 */
  padding-right: 1em;    /* 右の余白 */
  padding-top: 0.5em;    /* 上の余白 */
  padding-bottom: 0.5em; /* 下の余白 */
}

div.inner {
  display: inline-block;
  background-color: #739be6;
    
  padding-left: 1em;     /* 左の余白 */
  padding-right: 1em;    /* 右の余白 */
  padding-top: 0.5em;    /* 上の余白 */
  padding-bottom: 0.5em; /* 下の余白 */
}

You can see that there is white space around the characters.

Roughly

・Margin when specifying from a
child element to a parent element ・Padding when specifying from a parent element to a child element

It would be nice to use it properly.

border

“border” specifies the “border” of the box.
This can also be set individually for top, bottom, left, and right, or all at once.
}

Compared to before, there are more contents (parameters) to be set.

For the types of borders, refer to the sample below.

border setting example

Let’s take a look at an example border setting.

CSS

div.border-box {
  display: inline-block;
  width: 200px;
  height: 50px;
  border: solid 1px #999999; /*グレーの枠線 */
  border-radius: 10px;       /* 枠を角丸にする */
}

HTML

<div class="border-box">
</div>

“border-radius” is often used as a set with border as in the sample.
Border-radius is a CSS used to achieve rounded corners, and by using it in combination with border, it is possible to create a border with rounded corners instead of a perfect square.

box-shadow

box-shadow is used to add a “shadow” to an HTML element.

div.box-shadow {
  box-shadow: 7px 7px 3px #636363;
}

As with border, box-shadow also specifies multiple contents (parameters) at once.

Example of setting box-shadow

Here is an example of setting the shadow to the bottom right.

CSS

body {
  background-color: #ddd;
  margin: 2em;
}
div.shadow {
  width: 200px;
  height: 140px;
  background-color: white;
  box-shadow: 7px 7px 3px #636363;
}

HTML

<div class="shadow">
</div>

10 box setting examples using CSS

Now that you’ve learned the basics of boxes, let’s take a look at an example of setting a box using CSS.
Each point is also explained, so please try to customize it after understanding it firmly.

(1) Simple border

CSS

div.simple-box {
  display: inline-block;
  width: 400px;
  padding: 1em;
  border: solid 2px #404040; /* 枠の色はここを変更 */
  border-radius: 0.4em;
}

HTML

change border to double

A double line can be achieved by changing the border type specified in the border attribute to “double” .
Let’s change the CSS.

CSS

div.simple-box {
  display: inline-block;
  width: 400px;
  padding: 1em;
  border: double 6px #404040;  /* 枠をdoubleに変更 */
  border-radius: 0.4em;
}

frame with dashed line

If you set the border type to “dashed”, you can change the border to a dashed line.

CSS

div.simple-box {
  display: inline-block;
  width: 400px;
  padding: 1em;
  border: dashed 4px #404040; /* 枠をdashedに変更 */
  border-radius: 1em;
}

(2) Draw lines only up and down

By using only border-top and border-bottom, you can achieve a design with lines only at the top and bottom.

CSS

div.upbottom-box {
  display: inline-block;
  width: 400px;
  padding: 1em;
  border-top: solid 4px #404040;    /* 上方向の線 */
  border-bottom: solid 4px #404040; /* 下方向の線 */
}

HTML

In this sample, the same color is specified for the top and bottom, but it is also possible to specify different colors for each and change the thickness of the line.
Customize it with your own color.

change the line left or right

Change the border part of CSS to the left and right to change the color.

CSS

div.upbottom-box {
  display: inline-block;
  width: 400px;
  padding: 1em;
  border-left: solid 6px #3997bf;  /* 左方向の線 */
  border-right: solid 6px #3997bf; /* 右方向の線 */

}

However, when lines are placed horizontally, the boundary between top and bottom tends to be ambiguous.
If you want to put lines on the left and right, you should set the background color as follows.

CSS

div.upbottom-box {
  display: inline-block;
  width: 400px;
  padding: 1em;
  background-color: #e1f1f7;
  border-left: solid 6px #3997bf;
  border-right: solid 6px #3997bf;
}

(3) Draw a line only on the left

If you put a line only on the left, you can create a box like one-point advice.
The background color is also applied so that the border is not ambiguous.

CSS

div.left-border-box {
  display: inline-block;
  width: 400px;
  padding-top: 1em;
  padding-bottom: 1em;
  padding-left: 1em;
  padding-right: calc(1em + 12px);
  
  background-color: #e0e0e0;
  border-left: solid 12px gray;
}

HTML

Since the border is specified only on the right side, if the same padding is specified on the left and right sides, the balance will be bad.
So we set different values ​​for padding-left and padding-right.
The ‘calc()’ function set to padding-right is used to add properties set in different units.
By adding the border-left thickness (12px) in addition to the normal padding (1em), the left and right balance is the same.

(4) Card design

By using box-shadow, it is possible to create a card-like design.

CSS

body {
  background-color: #CFD8DC;
  margin: 1em;
}

div.card-box {
  display: inline-block;
  margin-right: 1em;
  width: 400px;
  padding: 1em;
  background-color: white;
  box-shadow: 3px 3px 4px #546E7A;
}

HTML

Such a card design with a three-dimensional effect is a method mainly adopted in “Material Design” advocated by Google.
By arranging multiple pieces of information as cards, you can create a three-dimensional list.

(5) Frame design

You can specify different colors for each of the four borders.
By making good use of this mechanism, it is also possible to design like a picture frame.

CSS

div.architrave-box {
  display: inline-block;
  width: 400px;
  position: relative;
  background-color: #e3e3e3;
  border-top: solid 14px #967200;
  border-left: solid 14px #856709;
  border-right: solid 14px #694f00;
  border-bottom: solid 14px #735700;
  
  box-shadow: 3px 3px 3px #888 inset;
}

div.architrave-box div{
  margin: 1em;
  padding: 1em;
  background-color: #faf3de;
  box-shadow: 1px 1px 4px #a2a2a2;
}

HTML

The direction of the shadow can be directed inward by adding “inset” at the end of box-shadow.
By using this technique, it is possible to express the three-dimensional effect on the inside like a picture frame.

(6) Design with stitches

By combining margin, padding, and border, you can create a design that looks like it has stitches.

CSS

div.stitch-box {
  display: inline-block;
  width: 400px;
  background-color: #ffcf70;
}

div.stitch-box div {
  padding: 1em; /* 破線の内側の余白 */
  margin: 0.5em;  /* 破線の外側の余白 */
  border: dashed 2px white;
  color: #4a2a00;
}

HTML

I created this design by nesting more divs inside the outer div element.
The outer div defines an outer bounding box.
Nested boxes have dashed borders.
The distance to the stitch is specified by the margin and padding of the inner nested div element.
Increasing the margin increases the margin outside the dashed lines that become stitches.

Please adjust it according to the design you want to make and the length of the display text.

(7) Add lines to the upper left and lower right to make brackets

You can also use “pseudo-elements” to create bracket-like designs.
Let’s check the sample first.

CSS

div.bracket-box {
  display: inline-block;
  width: 400px;
  position: relative;
  padding: 1.4em;
}

div.bracket-box::before {
  content:'';
  position: absolute;
  top:0;
  left:0;
  width:20px;
  height:20px;
  border-top: solid 3px black;
  border-left: solid 3px black;
}

div.bracket-box::after {
  content:'';
  position: absolute;
  right:0;
  bottom:0;
  width:20px;
  height:20px;
  border-right: solid 3px black;
  border-bottom: solid 3px black;
}

HTML

“::before” and “::after” are called “pseudo-elements”.
Pseudo-elements are a technique used to manipulate an element using only CSS without HTML. ::before adds a pseudo-element before the element and ::after adds a pseudo-element after the element.

By specifying border-top and border-left because the ::before element is placed on the upper left, and by specifying border-right and border-bottom because the ::after element is placed on the lower right, design.

change brackets to triangles

Similar to brackets, you can also place triangles by leveraging ::before and ::after.

CSS

div.bracket-box {
  display: inline-block;
  width: 400px;
  position: relative;
  padding: 1.4em;
}

div.bracket-box::before {
  content:'';
  position: absolute;
  top:0;
  left:0;
  width:0;
  height:0;
  border-top: solid 10px black;
  border-left: solid 10px black;
  border-right: solid 10px transparent;
  border-bottom: solid 10px transparent;
}

div.bracket-box::after {
  content:'';
  position: absolute;
  right:0;
  bottom:0;
  width:0;
  height:0;
  border-top: solid 10px transparent;
  border-left: solid 10px transparent;
  border-right: solid 10px black;
  border-bottom: solid 10px black;
}

A triangle is created by setting the width and height of the pseudo-element to 0 and devising the display of the border.

(8) Design like a sticky note

By using the ::after pseudo-element, you can create a design that makes the sticky note look slightly floating.

CSS

div.slip-box {
  display: inline-block;
  width: 400px;
  position: relative;
  padding: 1.4em;
  padding-top: 2em;
  background-color: #f8f0d7;
}

div.slip-box::after {    
  position: absolute;
  right: 2px;
  bottom: 6px;
  content: '';
  width: 45%;
  height: 10px;
  background: #a2a5a9;
  box-shadow: 0 6px 6px #a2a5a9;
  transform: rotate(2deg);
  z-index: -1;
}

HTML

<div class="slip-box">
   

A three-dimensional effect is created by adding a shadow to the lower right and rotating it slightly.

(9) Design like transparent tape

By skillfully combining the left and right borders, it is possible to create a design that resembles a scrap of tape.

CSS

body {
  background-color: #f8f0d7;
  margin: 1em;
}
span.tape {
  position: absolute;
  font-weight: bold;
  background-color:rgba(255,255,255, 0.3);
  border-left: 2px dotted rgba(0, 0, 0, 0.1);
  border-right: 2px dotted rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 5px rgb(0 0 0 / 20%);
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  padding-left: 1em;
  padding-right: 1em;
  color: #65513f;
}

HTML

<span class="tape">
</span>

The dashed lines are set for the left and right borders, but by specifying a transparent color as the color, the jaggedness of the tape cut is expressed.
This design is more effective for displaying short strings like this example than long texts.

You can use it like masking tape by adding colors and setting an image or pattern in the background, so why not customize it yourself?

(10) Combination of title + text

By using pseudo-elements, you can also display something like a title and body.

CSS

div.warning-box {
  display: inline-block;
  width: 400px;
  position: relative;
  border: solid 4px #ffcc12;
  background-color: #faeaaf;
  padding-top: 2.4em;
  padding-left: 1em;
  padding-right: 1em;
  padding-bottom: 1em;
}

div.warning-box::before{
  content: 'CHECK!';
  font-size: large;
  background-color: #ffcc12;
  padding-left:1em;
  padding-right:1em;
  color: #E65100;
  font-weight: bold;
  
  position: absolute;
  top: 0;
  left: 0;
  
}

HTML

First, margins are created by specifying margin-top for the outer frame div element.
On top of that, the after pseudo-element is used to display the header title inserted in the margin.

round the corners

The border specified by ::before can also be rounded, so by adding it to CSS, the following expression is possible.

CSS

div.warning-box {
  display: inline-block;
  width: 400px;
  position: relative;
  border: solid 4px #ffcc12;
  background-color: #faeaaf;
  padding-top: 2.4em;
  padding-left: 1em;
  padding-right: 1em;
  padding-bottom: 1em;
  border-radius:1em;
}

div.warning-box::before {
  content: 'CHECK!';
  font-size: large;
  background-color: #ffcc12;
  padding-left:1em;
  padding-right:1em;
  color: #E65100;
  font-weight: bold;
  
  position: absolute;
  top: 0;
  left: 0;
  border-bottom-right-radius: 1em;
  
}

If you specify border-radius for the outer div to make the corners rounded, the inner elements will also automatically have rounded corners.
However, the bottom right corner of the header element cannot be rounded, so in that case you can use the following CSS to make only a part of the corner rounded.

border-top-left-radius: <半径>;     /* 左上 */
border-top-right-radius: <半径>;    /* 右上 */
border-bottom-left-radius: <半径>;  /* 左下 */
border-bottom-right-radius: <半径>; /* 左下 */

Use stripes for header background color

Let’s change the background color of the header to stripes.

CSS

div.warning-box {
  display: inline-block;
  width: 400px;
  position: relative;
  border: solid 4px #ffcc12;
  background-color: #faeaaf;
  padding-top: 2.4em;
  padding-left: 1em;
  padding-right: 1em;
  padding-bottom: 1em;
  border-radius:1em;
}

div.warning-box::before {
  content: 'CHECK!';
  font-size: large;
  background-color: #ffcc12;
  /* ストライプの設定 */
  background-image: linear-gradient(
    -45deg,
    #ffcc12 15%, #faeaaf 15%,
    #faeaaf 25%, #ffcc12 25%,
    #ffcc12 65%, #faeaaf 65%,
    #faeaaf 75%, #ffcc12 75%,
    #ffcc12
  );
  background-size: 15px 15px;
  
  width: 100%;
  color: #E65100;
  font-weight: bold;
  text-align: center;
  
  position: absolute;
  top: 0;
  left: 0;
  
}

Stripes are set using linear-gradient in the part that will be the header.
The stripe-like pattern stands out, so it’s a good idea to use it as a focal point that you want to draw attention to.

in conclusion

In this article, I have explained how to design a box using CSS.

Readability is the most important aspect of design.
“Margins” affect readability.

Each of the designs introduced here has margins.
By setting appropriate margins, you can make the design easier to read, so when you actually apply it to your site, it is a good idea to pay attention to the “margins” when placing it.