CODEWITHSUNDEEP
htmlcss
MoHamed HaSsn
MoHamed HaSsn

Reputation: 555

Spaces between HTML element font-size

I tried to convert this Picture into HTML & CSS code but when I changed the font size of the paragraph, there's some unwanted space that I want to remove.

Example of desired result

the problem is here:

Example of actual result

.table h1,
.table h2,
.table h3,
.table p {
    margin: 0;
    padding: 0;
}

.table .table-nested .price {
    font-size: 60px;
    color: #0d0d0d;
}

.table .table-nested .planType {
    font-size: 25px;
    font-weight: bold;
    color: white;
    letter-spacing: 8px;
}

The HTML Code:

<h2 class="planType">Basic</h2>
<p class="price">$299/mo.</p>

Upvotes: 0

Views: 85

Answers (2)

Amit kumar
Amit kumar

Reputation: 278

TO reduce spacing, you may use line-height property:

p.price{
   line-height:1.2
}

Upvotes: 0

Rahul
Rahul

Reputation: 518

If you converted an image to HTML through an online tool, it probably won't work.

You should have written HTML for it, yourself.

Just like this:

.ad_wrap {
    max-width: 215px;
    text-align: center;
    background: #01c698;
    padding-bottom: 18px;
    border: 4px solid rgba(241, 241, 242, .5);
}
.ad_wrap h5 {
    font-size: 11px;
    text-transform: uppercase;
    font-family: sans-serif;
    color: #d5f0e9;
    font-weight: 100;
    margin-bottom: 0px;
    padding-top: 10px;
    letter-spacing: 10px;
}
.ad_wrap h2 {
    font-size: 31px;
    font-family: arial;
    margin: 0;
    font-weight: 800;
    color: #4b4a48;
}
.ad_wrap span {
    font-size: 7px;
    color: #484b4a;
    font-family: sans-serif;
    text-transform: uppercase;
    letter-spacing: 4px;
    font-weight: 800;
    position: relative;
    top: -6px;
}
<div class="ad_wrap">
	<h5>Premium</h5>
	<h2>$299</h2>
	<span>Month</span>
</div>

Upvotes: 1

Related Questions