I styled a <a> to a button, now its overflowing its parent container-CodePudding

i have trouble fixing my problem: I have a link styled to look like a button. I want it to direct to a sub-page. Now its clipping on the bottom from the parent container. Can someone help? I'm new to html and css :/ Thx :)

<div >
 <a  href="#">This is a button</a>
</div>

.container{
width:400px;
height: auto;
margin: auto;
}

.btn{
    border-radius: 5px;
    text-decoration: none;
    line-height: 30px;
    padding: 12px 24px;
    background-color: #ff007a;
}

.container{
width:400px;
height: auto;
margin: auto;
border-style: dashed;
border-color: black;
}

.btn{
    border-radius: 5px;
    text-decoration: none;
    line-height: 30px;
    padding: 12px 24px;
    background-color: #ff007a;
    color: white;
}

<div >
     <a  href="#">This is a button</a>
    </div>

CodePudding user response：

.btn {
    border-radius: 5px;
    text-decoration: none;
    line-height: 30px;
    padding: 12px 24px;
    background-color: #ff007a;
    color: white;
    display: inline-block;
}
.container {
    width: 400px;
    height: fit-content;
    margin: auto;
    border-style: dashed;
    border-color: black;
}

<div >
 <a  href="#">This is a button</a>
</div>

CodePudding user response：

.btn{
    display: inline-block;
    ...

}