javascript - 我的按钮文本总是显示在我为其设置的填充之外？

问题描述

我现在已经包含了完整的代码。就像我说的按钮的文本总是超出我为它设置的填充？我只是一个初学者，所以如果有任何错误，请指出并感谢您帮助我。

* { 
    
    margin: 0;
    
    padding: 0;
    
    box-sizing: border-box;
    
  }  

html {
     
     color: #555555;
    
     font-family:'Lato' , 'Arial' , sans-serif; 
    
     font-weight: 300;
         
     text-rendering: optimizeLegibility;
    
}

.row {
    
   max-width: 1140px;
    
   margin: 0,auto;
}

header {
    
    background-image: linear-gradient(rgba(0, 0, 0, 0.7),rgba(0, 0, 0, 0.7)),url(img/hero.jpg);
    height: 100vh;
    background-position: center;
    background-size: cover;
         
}

.hero-text-box {
    
    position: absolute;
    width: 1140px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    
}


h1 {
    margin: 0;
    font-size: 300%;
    color: #ffffff;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 1px;
    word-spacing: 3px;
}


.btn {
    display: inline-block;
    padding: 10px ,30px;
    font-weight: 300;
    text-decoration: none;
    border-radius: 200px;
  
}

.btn-full {
    
    color:#e67e22;
}

<!DOCTYPE html>

<html lang="en">
    
    <head>
        
        <link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
        <link rel="stylesheet" type="text/css" href="vendors/css/2015-03-25_13-52-05__grid.css">
        <link rel="stylesheet" type="text/css" href="resources/css/style.css">
        <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;1,300&display=swap" rel="stylesheet">
        
        <title>
            
            
            Omnifood
        
        </title>
    
     
    </head>
    
    
    <body>
        
        <header>
            
            <div class="hero-text-box">
            
                <h1>
                    
                    Goodbye junk food.<br /> Hello super healthy meals.
                                          
                </h1>
                
             
                
                
                <a href="#" class="btn btn-full">I’m hungry </a>
                
                <a href="#" class= " btn btn-ghost">Show me more </a>
                
                
            
            </div>

按钮文本总是显示在我为其设置的填充之外？？？？结果截图

.btn {
    display: inline-block;
    padding: 10px 30px;
    font-weight: 300;
    text-decoration: none;
    border-radius: 200px;
}

<a href="#" class="btn btn-full">I’m hungry </a>
                
<a href="#" class= "btn btn-ghost">Show me more </a>

标签： javascripthtmlcssweb

javascript - 我的按钮文本总是显示在我为其设置的填充之外？

问题描述

解决方案

推荐阅读