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

Space taken by a span element is bigger than the actual text – Html

I need the bottom and top lines to be closer to the title, but the font is taking more space than it actually needs.

This is how it looks in practice:
Actual Page

This is how im trying to make it look:
Ideal Look

My code:

HTML

<div id="title" class="title">
            <h1 id="title-h1">
                <span class="text-title">MINDESIGNS</span>
            </h1>
        </div>

CSS

h1{
    text-align: center;
    margin: 0px;
}

.text-title{
    font-family: 'Thick Thinks', sans-serif;
    font-weight: bold;
    color: #303030;
    font-size: 17vw;
    justify-content: center;
    vertical-align: middle;
    margin: 0;
    user-select: none;
}

.title{
    width: auto;
    border-bottom: 1px solid #303030;
    align-items: center;
    justify-content: center;
    padding-left: 1%;
    padding-right: 1%;
    padding-top: 0%;
    padding-bottom: 0%;
}
Tags:

2

Answers


  1. 0

    line-height: 1; should get you pretty close.

    .title {
    font-family: sans-serif;
    font-weight: bold;
    font-size: 14vw;
    border: 1px solid blue;
    display: inline-block;
    line-height: 1;
    margin-top: 1rem;
}
    <h1 class="title">MINDESIGNS</h1>
    Login or Signup to reply.
  2. 0
    1. you can use line height
    2. use another div with hr tag then add some styling
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search