Question

我一直在努力弄清楚为什么我会在渐变文字的上方和下方获得边距。我希望我的渐变大小为20的文本与12点字体的答案文本共享同一行。我按如下方式设置了CSS和html。

作为一个说明，粗体是渐变较大的文本

我有一个具体的问题？我有一个模糊的答案。

这两种文字风格在同一条线上...当我使用下面的代码时，我最后使用我的渐变字体占据了下方和上方的空间以与我的较小文本对齐。我试过浮动渐变字体。但随后我在渐变字体旁边放了3行文字而不是共享同一行。

编辑：谢谢你的建议。非常感激。这些肯定会修复两个不排队的字体。如果我写的更多，然后是一行文字。文本现在需要返回以形成第二行的东西我仍然在持有渐变字母的第一行文本之间获得这些大空格。和第二行文字。

我的CSS

#faqone {
    position: relative;
    font-size: 20px;
    margin-bottom: 0px;
    font-family: 'EB Garamond', Serif;
    float: left;         
    }  

#faqone a {  
        text-decoration: none;  
        color: #4b82ff;
        position: absolute;  

        -webkit-mask-image: -webkit-gradient(linear, left top, left bottom,
 from(rgba(0,0,0,255)), to(rgba(0,0,0,0)));  
    }  

#faqone:after {  
        content : 'A random Question?';  
        color: #202b71;  
    }  
.textmastP {
    font-family: 'EB Garamond', serif;
    font-size: 12pt;
    text-indent: 20px;
}

我的HTML

   <div style=" width:721px; background: #fff; font-family: 'EB Garamond', serif;">
<p id="faqone"><a href=""> A random Question? </a></p>'
<p class="textmastP"> A specific answer: text breaks!</p>

Answer 1

我真的不知道你想做什么，但是将两个文本放在同一行的最简单方法是使用.textmastP{ margin:6px }。

jsFiddle

Answer 2

这是因为你在第一个<p>标签之后有那么小的撇号。删除它，你现在将看到实际的高度差异。要对它们进行排列，请将line-height值添加到第二个<p>以补偿由于.textmastP类的不同字体大小而导致的高度差异。这是fiddle

<div>
    <p id="faqone"><a href=""> A random Question? </a>
    </p>
    <p class="textmastP">A specific answer: text breaks!</p>
</div>

CSS：

div {
    width:721px;
    background: #fff;
    font-family:'EB Garamond', serif;
}
#faqone {
    position: relative;
    font-size: 20px;
    margin-bottom: 0px;
    font-family:'EB Garamond', Serif;
    float: left;
}
#faqone a {
    text-decoration: none;
    color: #4b82ff;
    position: absolute;
    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 255)), to(rgba(0, 0, 0, 0)));
    margin:0;
    padding:0;
}
#faqone:after {
    content :'A random Question?';
    color: #202b71;
}
.textmastP {
    font-family:'EB Garamond', serif;
    font-size: 12pt;
    text-indent: 20px;
    line-height:3.9;
}

Answer 3

为什么不简化一切？此外，是否还需要锚标记（<a>）？看起来它不会去任何地方，因为你希望问题的答案彼此符合。如果您不需要，请将其切换为<strong>。

http://jsfiddle.net/6bZbJ/

如果您正在构建常见问题解答部分，我建议您使用无序列表（<ul>）或定义列表（<dl>）。 http://www.w3.org/TR/REC-html40/struct/lists.html

HTML 的

<div id="faqs">
     <p>
          <a class="question" href="">A random Question?</a>
          A specific answer: text breaks!
     </p>
</div>

CSS

#faqs {
     font: 12pt/1.5 'EB Garamond', serif;
     color: #202b71;  
}
#faqs a {  
     color: #4b82ff;
     font-size: 20px;
     padding-right: 20px;  /* instead of text-indent */
     text-decoration: none;  
     -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,255)), to(rgba(0,0,0,0)));
    }

使用渐变文字作为照明字母段落格式？ CSS webkit

3 个答案: