oneman oneman - 1 month ago 7
CSS Question

How to reduce space between two words vertically in css/html

Originally my design looked like this, and I was happy with it, except the loading time was quite bad because the big circle logo was an image.

enter image description here

So the only way I could think of speeding up the loading times is to change it from an image to css3, unfortunately I haven't been able to find a nice replacement, but this is what I have at the moment.

enter image description here

Now my main concern right now is trying to lessen the gap between "Pavel" and "Design" but I'm not sure how.

On a less important note if you have any method of me being able to keep the original design without horrible load times that'd be good. I tried decreasing img quality and the size went from 1.6MB to 140kb and the load was still bad.



div.homepage {
position: fixed;
text-align: center;
margin: 0 auto;
left: 0;
right: 0;
}

/* Logo Design */
div.circle {
margin: 0 auto;
border-radius: 50%;
width: 900px;
height: 900px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}


p.pavel, p.design {
font-family: 'Open Sans', sans-serif;
font-size: 10em;
color: #708090;
}

<body>
<div class="homepage">
<div class="circle">
<p class="pavel">Pavel</p>
<p class="design">Design</p>
</div>
<ul>
<li class="button"><a href="index.html" data-text="Home">Home</a></li>
<li class="button"><a href="about.html" data-text="About">About</a></li>
<li class="button"><a href="services.html" data-text="Services">Services</a></li>
<li class="button"><a href="contact.html" data-text="Contact">Contact</a></li>
</ul>
</div>
</body




Answer

Paragraph elements have a margin by default, if you remove it then they should be closer to each other vertically. You can adjust the margin or use some padding to get the spacing that you want.

p.pavel, p.design{
    margin: 0;
}