main p, main h2, main h3, main h4 {
width: 268px;
height: auto;
margin: 0 auto;
text-align: center;
margin-top: 10px;
}
.center {
margin: 0 auto;
width: 268px;
height: 100px;
text-align: center;
}
.orange-button {
padding: 10px;
border: 1px solid black;
}
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<main>
<h4>
Zapraszam!
</h4>
<div class="center">
<a class="orange-button" href="#">
Przejdź do strony głównej!
</a>
</div>
</main>
</body>
</html>
正如您在这段代码中看到的,button
的填充超出了 div
.center
此外,他的边框位于 h4
元素之上。
我不知道这里究竟发生了什么,正在发生什么。
button
周围的边框不应超出 .center
div,尤其不应超出 h4
最佳答案
在你的 orange-button
CSS 中添加 display: inline-block
main p, main h2, main h3, main h4 {
width: 268px;
height: auto;
margin: 0 auto;
text-align: center;
margin-top: 10px;
}
.center {
margin: 0 auto;
width: 268px;
height: 100px;
text-align: center;
}
.orange-button {
padding: 10px;
border: 1px solid black;
display: inline-block;
}
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<main>
<h4> Zapraszam!</h4>
<div class="center">
<a class="orange-button" href="#">
Przejdź do strony głównej!
</a>
</div>
</main>
</body>
</html>
关于html - 另一个元素上的一个元素,以及超出 div 的填充 Html、Css,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46035972/