# Trying to make border-box

**URL:** <https://discourse.nodered.org/t/trying-to-make-border-box/72834>\
**Category:** Dashboard\
**Created:** [28 December 2022 14:22 UTC](https://discourse.nodered.org/t/trying-to-make-border-box/72834 "2022-12-28T14:22:04Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![henkkas](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/henkkas/32/39844_2.png) [@henkkas](https://discourse.nodered.org/u/henkkas)\
**Post date:** [28 December 2022 14:22 UTC](https://discourse.nodered.org/t/trying-to-make-border-box/72834/1 "2022-12-28T14:22:04Z")

</div>

I am trying to display a value with a UI-element by means of a template node. I use `box-sizing: border-box;` But now I am a bit stuck.

I have gotten this far:  
 ![afbeelding](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/4/f457b54e09f26e71a04760b9d0397cf998b9809c.png)

What I am trying to do, and failing so far, is to loose the spaces between the boxes. And at the same time getting more space around the characters. Here is the code that I implemented so far:

Anyone has a suggestion?

```auto
<head>
<style>
    * {
        box-sizing: border-box;
    }

    .container {
        width: 100%;
    }
    
    .digitBlack {
        width: 12.5%;
        font-size: 200%;
        border: 1px solid white;
        font-weight: 700;
        color: white;
        background-color: black;
    }
    .digitRed {
        width: 12.5%;
        font-size: 200%;
        border: 1px solid white;
        font-weight: 700;
        color: white;
        background-color: red;
    }
    
 
</style>
</head>

<body>

    <div class="container">
        <span class="digitBlack">{{msg.payload[0]}}</span>
        <span class="digitBlack">{{msg.payload[1]}}</span>
        <span class="digitBlack">{{msg.payload[2]}}</span>        
        <span class="digitBlack">{{msg.payload[3]}}</span>
        <span class="digitBlack">{{msg.payload[4]}}</span>
        <span class="digitRed">{{msg.payload[6]}}</span>        
        <span class="digitRed">{{msg.payload[7]}}</span>
        <span class="digitRed">{{msg.payload[8]}}</span>        
    </div>

</body>

```

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [28 December 2022 14:40 UTC](https://discourse.nodered.org/t/trying-to-make-border-box/72834/2 "2022-12-28T14:40:00Z")

</div>

I did something similar lately. With animations and stuff ... Maybe you can get some ideas from that.

> [@Mechanical counter display](https://discourse.nodered.org/t/mechanical-counter-display/72078):
>
> Just for fun. [image] [{"id":"656888cd7308428e","type":"inject","z":"bf0d83d32eec75c2","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"1","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":230,"y":860,"wires":[["b7f0df3f43a8dc6e"]]},{"id":"b7f0df3f43a8dc6e","type":"function","z":"bf0d83d32eec75c2","name":"random data","func":"let current = context.get('current') || 1\n\ncurrent += Math.floor(Math.random()\*2);\nif(current \> 999999){…

---

<div class="post-metadata">

**Author:** ![henkkas](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/henkkas/32/39844_2.png) [@henkkas](https://discourse.nodered.org/u/henkkas)\
**Post date:** [28 December 2022 14:57 UTC](https://discourse.nodered.org/t/trying-to-make-border-box/72834/3 "2022-12-28T14:57:28Z")

</div>

@hotNipi Woow, that is awesome. Little bit more complicated then what I am trying to achieve 😄 😄 😄. Thanks for that!! I

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [11 January 2023 14:58 UTC](https://discourse.nodered.org/t/trying-to-make-border-box/72834/4 "2023-01-11T14:58:14Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.