2016-12-18 6 views
0

この画像をHTML & CSSコードに変換しようとしましたが、段落のフォントサイズを変更したときに削除したい不要なスペースがあります。HTML要素のフォントサイズの間のスペース

Example of desired result

問題はここにある:

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; 
} 

HTMLコード:

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

あなたは全体のマークとフィドルを作成することができますこれとcssのアップ – Geeky

答えて

1

あなたがオンラインツールを通じてHTMLに画像を変換した場合、それはおそらく動作しません。

あなた自身にはHTMLと書かれているはずです。

ただ、このような

.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"> 
 
\t <h5>Premium</h5> 
 
\t <h2>$299</h2> 
 
\t <span>Month</span> 
 
</div>

0

間隔を短縮するには、行の高さプロパティを使用することがあります。

p.price{ 
    line-height:1.2 
} 
関連する問題