Using gradient text as an illuminated letter paragraph formatting? CSS webkit

Question

i've been trying to sort out why I get margins above and below my gradient text. I would like to have my gradient size 20 text share the same line as my answer text at 12 point font. I've setup my CSS and html as follows.

As an illustrative, bold being the gradient larger text

I have a specific question? i have a vague answer.

those two text styles are on the same line... while when i use the code below I wind up with my gradient font taking up to much space below and above to line up with my smaller text. I've tried to float the gradient font. but then i wind up with 3 lines of text next to my gradient font not sharing the same line.

edit: thank you for the suggestions. much appreciated. these definitely fix the two fonts not lining up. if i write more then a line of text. something where the text now needs to return to form a second line i'm still getting these big spaces between the first line of text holding the gradient letters. and the second line of text.

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

MY 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

Why not simplify it all? Also, is the anchor tag (<a>) even required? It looks like it's not going to go anywhere as you want the answer to the question to be in-line with one another. If you don't need it, switch it up to <strong>.

http://jsfiddle.net/6bZbJ/

If you're building a FAQ section I would suggest using an un-ordered list (<ul>) or a definition list (<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

I don't really know what you want to do, but the easiest way to put the two texts at the same line is using .textmastP{ margin:6px }.

The jsFiddle

Answer 3

It's because you have that little apostrophe after the first <p> tag. Remove it and you will now see what the height differences actually are. To line them up, add line-height value to the 2nd <p> to compensate for height difference due to different font -sizes to .textmastP class. Here is the fiddle

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

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