HTML元素之间的空格font-size

Question

我试图将此图片转换为HTML & CSS代码，但当我更改段落的字体大小时，有一些不需要的空格需要删除。

​

问题出在这里：

​

​

.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>

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

​

Answer 2

要减少间距，可以使用line-height属性：

p.price{
   line-height:1.2
}