如何为<strong>文字

时间:2016-10-15 17:58:43

标签: html css

在此页面上{http://nate.fm/articles)我列出了两篇不同的文章。一个是大胆的,一个是常规的。它们都是3px边框底部的链接。但是,粗体字的边框底部比常规字体略低。

有人能告诉我CSS中定义的额外空间在哪里吗?

2 个答案:

答案 0 :(得分:1)

  

但是,粗体字的边框底部比常规字体略低。

没有。在class Email extends React.Component { constructor(props) { super(props); this.change = this.change.bind(this); this.validateEmail = this.validateEmail.bind(this); this.state = { value : '' } } removeStatus() { $('input').on('keydown',function () { $('.contextual-info').fadeOut(); }); } validateEmail(event) { event.preventDefault(); var token = $('#token').val(); var email_regex=/^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i; if ($.trim(this.state.value) !== "") { if (email_regex.test(this.state.value)) { $.ajax({ url:'/login', type:'post', data:{email:this.state.value,_token:token}, success: function (response) { if (response) { $('#email').remove(); $('.btn').remove(); $('#status').html(''); ReactDOM.render(<Password /> ,document.getElementById('login-dialogue')); $('input[type="password"]').focus(); } else { $('input#email').addClass('input-context'); if($('#status').html('<div class="bg-danger contextual-info wrong">Email Address Not Found!</p>')){ this.removeStatus(); } } } }); } else { if($('#status').html('<div class="bg-danger contextual-info wrong">Invalid Email Address</div>')){ this.removeStatus(); } } } else { if($('#status').html('<div class="bg-danger contextual-info wrong">Can\'t submit an empty field!</div>')){ this.removeStatus(); } } } change (event) { this.setState({ value : event.target.value }); } render(){ return( <div className="login-dialogue" id="login-dialogue"> <h1 className="text-center">Log in</h1> <div id="status"></div> <form action="" onSubmit={this.validateEmail} id="validateEmail"> <input type="email" id="email" value={this.state.value} placeholder="Email Address" onChange={this.change} /> <button type="submit" className="btn btn-flat btn-wide teal white-text">Continue</button> </form> </div> ); } } ReactDOM.render(<Email /> ,document.getElementById('flex-me')); 链接下,边框比第一个字符Like下方的字符低7px,在链接L下方,边框再次比字符Pro-Life vs Pro-Birth低7px。也许你被P中的g迷惑了。

P.S:我通过打印屏幕并粘贴到photoshop来检查距离。

答案 1 :(得分:0)

看起来这些实际上是不同的字体变体:字体权重是400和700,所以700字体可能略有不同(下降)尺寸/高度,以适应那些更大胆的字母到线。