Display inline block the right way to achieve this

Question

I have the following CSS lines:

.liquid {
display: inline-block;
width: 25px;
height: 25px;
background: #ff8125;
margin-right: 15px; 
}

<h2 class="liquid">Liquid</h2>

It should look like this: https://i.stack.imgur.com/p9Yfr.jpg

But instead looks like this: https://i.stack.imgur.com/K1kCt.jpg

What am i doing wrong here and how to get it exactly like the first pic?

I tried overflow hidden but that only shows Liquid in 25x25 on the block and the rest is not showing.

Any help is much appreciated.

Kind regards,

Majin Buu

Marijan · Answer 1 · 2017-04-18T10:07:41.927

0

You are styling the font part of the wanted result itself. You should either add an element for the orange square or use a pseudo element. This will get you in the right direction.

.liquid {
  line-height: 1;
}

.liquid:before {
  background: #ff8125;
  content: ''; /* important for pseudo elements */
  display: inline-block;
  height: .9em;
  margin-right: .45em; 
  position: relative;
  top: .1em;
  width: .9em;
}

<h2 class="liquid">Liquid</h2>

edited Apr 18 '17 at 10:07

answered Apr 18 '17 at 09:45

Marijan

1,825
1
13
18

Thank you very much Mary. Use of a pseudo element is indeed the best practice for this. – MajinB Apr 19 '17 at 13:21
Yes, I think so – you’re welcome ;-) Marking this answer as the right one would be appreciated then. – Marijan Apr 19 '17 at 13:24

score 0 · Answer 2 · answered Apr 18 '17 at 09:46

0

I think you should create another element for the orange square instead of editing the class of the h2 element because the background attribute it will be applied on that element, so I would make something like:

<div class="liquid"></div>
<h2>Liquid</h2>

.liquid {
  float: left;
  width: 25px;
  height: 25px;
  background: #ff8125;
  margin-right: 15px; 
}

To have the square floating to the left of the element.

answered Apr 18 '17 at 09:46

Manuel

470
4
12

Be aware that using empty elements ain’t so good. See here http://stackoverflow.com/questions/14182383/are-empty-divs-bad – Marijan Apr 18 '17 at 09:49

score 0 · Answer 3 · answered Apr 18 '17 at 09:49

0

Check out CSS position!

.liquid {
display: inline-block;
position: absolute;
width: 25px;
height: 25px;
background: #ff8125;
}

h2 {
  position: relative;
  margin-left: 30px; 
}

<div class="liquid"></div><h2>Liquid</h2>

answered Apr 18 '17 at 09:49

Felix Haeberle

1,530
12
19

score 0 · Answer 4 · answered Apr 18 '17 at 09:53

0

Use html like this

<div class="bg_white">
<span class="liquid"> </span><h2>Liquid</h2>
</div>

CSS

.bg_white{background:white; padding:5px; width:auto; float:left;}
.liquid {
    display: inline-block;
    width: 25px;
    height: 25px;
    background: #ff8125;
    margin-right: 15px; 
    float:left;
    font-size:18px;
}
.bg_white h2{float:left; margin:0px;}

answered Apr 18 '17 at 09:53

chirag solanki

399
2
8

Hop it is useful to you :) – chirag solanki Apr 18 '17 at 09:54

score 0 · Answer 5 · answered Apr 18 '17 at 10:04

Pseudo element is better for this solution:

h2 {
    background: #eee;
    padding: 5px;
    display:inline-block;
}

.liquid::before {
    content:'';
    display: inline-block;
    vertical-align: middle;
    width: 25px;
    height: 25px;
    background: #ff8125;
    margin-right: 15px; 
}

<h2 class="liquid">Liquid</h2>

score 0 · Answer 6 · answered Apr 18 '17 at 13:06

you can use below CSS for this if text is small and always in one line.

.liquid {
    display: inline-block;
    padding-left: 10px;
    border-left: 25px solid #ff8125;
    margin-right: 15px;
    font: 25px/25px Arial;
    font-weight: bold;
}

<h2 class="liquid">Liquid</h2>

Display inline block the right way to achieve this

6 Answers6