How to put blinkies in their own box (double spaced)

You know the little blinkies/stamps you collect like shiny Pokémon. This makes them look organized and more accessible to read

What we’re making

A box with:

• a title

• your blinkies in rows

• extra vertical spacing between rows (double spaced vibes)

Step 1: Paste this CSS once

Put this inside your <style> ... </style> area (only one time, even if you make multiple blinky boxes).

/* BLINKY BOX */
.blinky-box{
  border: 1px solid #ffb6d9;
  background: #fff4fb;
  border-radius: 12px;
  padding: 10px 12px;
  margin: 10px 0;
  box-sizing: border-box;
}

.blinky-title{
  font-weight: bold;
  font-size: 13px;
  margin-bottom: 8px;
}

/* Each row of blinkies */
.blinky-row{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;             /* space between blinkies */
  margin-bottom: 14px;  /* this is the “double spacing” between rows */
}

/* remove extra spacing on the last row */
.blinky-row:last-child{
  margin-bottom: 0;
}

/* Blinky sizing */
.blinky-row img{
  height: 20px;         /* typical blinky height */
  width: auto;
  display: block;
  image-rendering: auto; /* keep gifs smooth */
}

Step 2: Paste the HTML where you want the box to show

Replace the BLINKY_URL_HERE parts with your blinkies’ direct image links.

<div class="blinky-box">
  <div class="blinky-title">(っ˘* ) blinkies ( ˘* )っ</div>

  <div class="blinky-row">
    <img src="BLINKY_URL_HERE">
    <img src="BLINKY_URL_HERE">
    <img src="BLINKY_URL_HERE">
    <img src="BLINKY_URL_HERE">
  </div>

</div>

That’s it. Add more blinkies by adding more <img> lines. Add more rows by copying a whole <div class="blinky-row"> ... </div>.

Important beginner note: use the image URL, not embed code

You want the link that ends in something like:

• .gif

• .png

• .jpg

• .webp

Quick way: right click the blinky → “open image in new tab” → copy that URL.

Optional tweak: center the blinkies

If you want them centered inside the box, change this line:

.blinky-row{ display: flex; }

to:

.blinky-row{ display: flex; justify-content: center; }