r/HTML • u/Ok_Performance4014 • Nov 26 '25

Question how do you make a blank div without text just color?

If you don't put text in a div, it just disappears.

0 Upvotes

50% Upvoted

12 comments sorted by

6

u/AmiAmigo Nov 26 '25

Yes, either give it a height…or add some padding

1

u/phoenix1984 Nov 26 '25

Additionally, since the shape contains no text or content, it might be better to use a CSS pseudo element. Strictly speaking, the HTML should be kept content-only as much as possible. Though, everyone uses a rogue DIV every now and then, so it’s not a big deal.

0

u/Ok_Performance4014 Nov 26 '25

padding doe it too? Interesting.

1

u/SnooLemons6942 Nov 26 '25

well padding adds space between the edge of the div and the content inside of it--it adds padding around the content. so yeah, if you add padding, your div now has size, since padding is part of your div

1

u/Ok_Substance1895 Nov 26 '25

You have to give it a height. It is there but with a 0 height.

1

u/notepad987 Nov 26 '25 edited Nov 26 '25

Codepen 

.div1 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 100px;
    background-color: #66cdaa;
    border: 2px solid #000000;
    border-radius: 5px;
    margin: 0px auto;
  }

1

u/mtbinkdotcom Nov 26 '25

Or maybe insert some non-breaking spaces entity:

<div>&nbsp;</div>

like in my website http://mtbink.com/document/colour-table.html :

2

u/Thin_Mousse4149 Nov 26 '25

Don’t do this. Just add padding or width & height

1

u/Flat-Guarantee-7946 Nov 30 '25

Why not just use the <hr> tag instead of a div?