Menu
I met a problem that there is a black line exist my html page but I didn't have any code for it
The part I use red line to draw a circle on it. There is a black line. Here is my html code.
<div class="mid">
<a href="@Url.Action("WesternCuisine", "Home")">
<img src="~/Image/western_cuisine.png" style="width: 40%; height: 40%;" />
</a>
<a href="@Url.Action("ChineseCuisine", "Home")">
<img src="~/Image/chinese_cuisine.png" style="width: 40%; height: 40%;" />
</a>
<div class="cfc-container">
<h1 class="main-caption"> Your precious <br /> Feedback is our <br /> Motivation to be better <br /><button type="button" class="main-button" onclick="window.location.href='/Home/Feedback';"><strong>Learn More</strong></button> </h1>
</div>
</div>
And my css code
.mid {
margin-top: 0px;
flex-wrap: wrap;
justify-content: center;
text-align: center;
}
.cfc-container {
display: inline-block;
width: 80%;
padding-top: 30px;
padding-bottom: 30px;
margin-top: 5px;
margin-bottom: 30px;
color: inherit;
border: 1px solid;
background-color: white;
background-image: linear-gradient(to right,rgba(228,241,254,1),rgba(255,255,255,0.2)), url(../Image/customer_service.png);
background-repeat: no-repeat;
background-position: right;
}
I dun know how to delete that black line even I make border: none also cannot.
769
asked Nov 14 '25 18:11
This is because of the default behavior of tag - text-decoration,
.mid a {
text-decoration: none;
}
.mid {
margin-top: 0px;
flex-wrap: wrap;
justify-content: center;
text-align: center;
}
.mid a {
text-decoration: none;
}
.cfc-container {
display: inline-block;
width: 80%;
padding-top: 30px;
padding-bottom: 30px;
margin-top: 5px;
margin-bottom: 30px;
color: inherit;
border: 1px solid;
background-color: white;
background-image: linear-gradient(to right,rgba(228,241,254,1),rgba(255,255,255,0.2)), url(../Image/customer_service.png);
background-repeat: no-repeat;
background-position: right;
}<!DOCTYPE html>
<html>
<body>
<div class="mid">
<a href="@Url.Action("WesternCuisine", "Home")">
<img src="https://thewindowsclub-thewindowsclubco.netdna-ssl.com/wp-content/uploads/2018/01/Password-Spoofing.jpg" style="width: 40%; height: 40%;" />
</a>
<a href="@Url.Action("ChineseCuisine", "Home")">
<img src="https://thewindowsclub-thewindowsclubco.netdna-ssl.com/wp-content/uploads/2018/01/Password-Spoofing.jpg" style="width: 40%; height: 40%;" />
</a>
<div class="cfc-container">
<h1 class="main-caption"> Your precious <br /> Feedback is our <br /> Motivation to be better <br /><button type="button" class="main-button" onclick="window.location.href='/Home/Feedback';"><strong>Learn More</strong></button> </h1>
</div>
</div>
</body>
</html>This is underline of first <a> tag.
Just apply text-decoration: none property to <a> tags in this block.
26
answered Nov 17 '25 07:11
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
