Question 45147 in Html Question posted in
Some basic documentation can be found here.

Remove white spaces left after positioning div – Html

I am trying to position a very basic div inline with some text.
When I move the div it leaves blank spaces that I can’t remove. Would you be kind to guide me with some css tricks for it?

.chord {
  color: orangered;
  font-weight: bold;
  display: inline;
  position: relative;
  top: -20px;
  left: 20px;
}
<br/> Empty
<div class="chord">Bm</div>spaces, what are we living for?<br/><br/> Abandoned
<div class="chord">G</div>places, I guess we know the score <br/>

Fiddle, in case you want to play with it.

https://jsfiddle.net/rondolfo/r3dphgsL/11/

I did search for an answer and I couldn’t find it, but I believe it is a very basic problem for someone that is proficient in css.

Tags:

2

Answers


  1. 0

    Use inline-flex instead of inline for the display property; and set the width to 0.

    That style will remove the space, but will still show the chord text.

    You may also remove the left spacing and add a space before the div.

    .chord{
    color: orangered;
    font-weight: bold;
    display: inline-flex;
    position: relative;
    top: -20px;
    width: 0px;
}
    Login or Signup to reply.
  2. 0

    Setup some classes to use as before elements and position them accordingly. You can even make one for each chord as demonstrated below.

    .chord{
position: relative;
}
.chord:before{
color: orangered;
font-weight: bold;
display: block;
position: absolute;
content: "";
top: -20px;
}
.chord.b-minor:before {
content: "Bm";
}
.chord.g:before {
content: "G";
}
    <br />
Empty <span class="chord b-minor"></span> spaces, what are we living for?<br/><br/> Abandoned<span class="chord g"></span> places, I guess we know the score <br/>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search