使用渐变文本作为发光字母段落格式?CSS网络工具包

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

为什么不把它全部简化呢？此外，是否还需要锚定标签（<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)));
    } 

Answer 2

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

jsFiddle

Answer 3

这是因为在第一个<p>标记后面有一个小撇号。去掉它，你就会看到实际的高度差是多少。为了排列它们，将line-height值添加到第二个<p>，以补偿由于.textmastP类的字体大小不同而造成的高度差异。这是小提琴

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