我正在编写代码，我想缩小“Szafranowka”和“Apartaments & Restaurant”之间的空间。这是它现在的样子:https://gyazo.com/d6843d8857e954acbae5c1da748c044b 我实在找不到完全符合我期望的答案。拜托，任何人都可以帮助我吗？ :) 另外，我想在“Wejscie/Entrance”周围做一个小方 block ，但是当我尝试用边框做它时，它看起来像这样:https://gyazo.com/f84fedc7a78854773b287e01ebd3a21f
这是我用来制作边框的部分代码:
<h5 style="border:3px; border-style:solid; border-color:#000000; padding: 1em;">Wejscie/Entrance</h5>
这是我的代码:
HTML:
<!DOCTYPE HTML>
<head>
<title>Szafranowka - Apartments & Restaurant </title>
<meta name="viewport" content="width=device-width", initial-scale=1">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<link rel="stylesheet" href="style.css" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Tangerine" rel="stylesheet">
</head>
<body>
<!-- Główny DIV całej strony -->
<div id="container">
<!-- Lewa część tła strony, zamknięta w divie -->
<div id="background">
<img src="background.jpg"> </img>
</div>
<div id="header">
<h2>Szafranowka</h2> <p>Apartments & Restaurant </p>
<br></br> <h5 id="entrance">Wejscie/Entrance</h5>
</div>
</div>
</body>
</html>
CSS:
body {
padding: 0;
margin: 0;
height: 100vh;
width: 100vw;
}
#container
{
width: 100%;
height: 100%;
}
#background
{
width: 100%;
height: 100%;
position: absolute;
opacity: 0.5;
filter: blur(3px);
filter: contrast(50%);
filter: brightness(30%);
}
#background img
{
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
#header
{
position: absolute;
z-index: 1;
font-family: 'Tangerine', cursive;
text-align: center;
color: #9F5F9F;
font-size: 70px;
display: table-cell;
vertical-align: middle;
width: 100%;
text-shadow: 2px 2px #660055;
}
最佳答案
到你的#entrance，试试这个:
#entrance {
width: 8rem; //or another size
margin auto; // to center
border: 2px solid;
}
关于html - 如何在 HTML 中的 2 个句子之间缩小间距，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48194656/