html - 行高扩展了 href 范围

Question

正如标题所说:

<style type="text/css" scoped>
    @media(min-width: 640px){
        .<?php echo $championget;?>{
            background-image: url('<?php echo 'assets/champions/'.$championget;?>_pc.jpg');
            background-position: center center;
        }
    }
    @media(max-width: 639px){
        .<?php echo $championget; ?>{
            background-image: url('<?php echo 'assets/champions/'.$championget; ?>_mobile.jpg');
            background-position: center center;
        }
    }
</style>
<?php   echo '<a href="index.php?Champion='.$championget.'"><div class="';
    echo $championget;
    echo ' champion"><p id="champion_text">'.$championget.'</p></div></a>';
?>

以及执行此操作的 #champion_text CSS:

#champion_text{
    color:white;
    line-height: 60px;
    font-size: 23px;
    text-shadow: -1px -1px 0 #000,  
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000;
}

显示问题的图片:http://imgur.com/XPmtrBd

Answer 1

而是使用这种方法将其向下移动。删除 line-height 并添加我的 CSS (大写)...

#champion_text{
color:white;
/*line-height: 60px;*/
DISPLAY: INLINE-BLOCK;
PADDING-TOP: 30px; /*You'll have to play width the amount... 30px is just my guess */
font-size: 23px;
text-shadow: -1px -1px 0 #000,  
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;

OR 按相对位置将其向下推，并从顶部向下推 (30px)。请参阅下面的大写 CSS。

#champion_text{
color:white;
/*line-height: 60px;*/
POSITION: RELATIVE;
TOP: 30px; /*You'll have to play width the amount... 30px is just my guess */
font-size: 23px;
text-shadow: -1px -1px 0 #000,  
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;