Question

我正在创建一个门户网站社交媒体页面。我希望页面中间的文本在它周围有一个相对靠近文本的边框。但是，每当我在CSS中添加边框时，它似乎都会覆盖整个页面而不是文本。反正是否有减少文本和边框之间的空间量？

html,
body {
  background-color: #000000;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
}
.ben_buchanan {
  font-family: 'Montserrat', sans-serif;
  color: #FFFFFF;
  font-size: 72px;
  height: 90%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #FFFFFF;
}
.fullstop {
  background: none;
  color: #FFFFFF;
  -webkit-animation: pulsate 3s ease-out;
  -webkit-animation-iteration-count: infinite;
  opacity: 0;
}

 <h1 class="ben_buchanan">BEN BUCHANAN<mark class="fullstop">.</mark></h1>

以下是目前的情况：

这是code on pastebin。

Answer 1

border适用于元素的整个“边界框”。由于您已为元素指定了宽度和高度，因此边框将围绕该区域。

解决方案是在.ben_buchanan元素内部创建一个内联元素，这是实际包含文本和边框的元素。

所以

<h1 class="ben_buchanan">BEN BUCHANAN<mark class="fullstop">.</mark></h1>

变为

<h1 class="ben_buchanan"> <span class="inside_text">BEN BUCHANAN<mark class="fullstop">.</mark></span> </h1>

然后将边框应用于.inside_text。

Answer 2

您可以先将h1样式设置为：

<h1 style='border:2px black solid;'>BEN BUCHANAN<mark 
class="fullstop">.</mark></h1>

然后，将显示设置为css，如：

h1{
   display:inline;
}

这应该解决你的问题，边框没有环绕文本。

Answer 3

您正在将边框应用于H1 div，它占据页面高度的90％。因此，围绕它的边框将出现在屏幕的边缘 - 不在您的文本周围。

在你的情况下，你可以在H1标签周围有一个包装器div，它应该有display:flex和高度定义。然后使用vertical-align: middle;使所有内部内容元素垂直居中。

H1有显示块，可以占用整个屏幕宽度。所以要让你的边界靠近内容的左右两侧。将H1设为display:inline-block，以便垂直对齐对其产生影响。并应用应使文本水平居中的margin:0 auto。

因此，您的文字最终将在页面中心（垂直和水平）与其周围的边框对齐。

您可以通过对h1应用填充来增加边框和文本周围的空间。

查看以下代码段

＆＃13;

/* General */

html, body {
	background-color: #000000;
	
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	
	overflow: hidden; /* Will hide anything on the x and y axis that goes outside of the element, so there would be no need for a scrollbar */
}

/* Classes */
.name-wrapper{
  align-items: center;
    display: flex;
    height: 90%;
    vertical-align: middle;
}

.ben_buchanan {
  border: 1px solid #ffffff;
    color: #ffffff;
    display: inline-block;
    font-family: "Montserrat",sans-serif;
    font-size: 72px;
   margin: 0 auto;
}

.fullstop {
	background: none;
	color: #FFFFFF;
	
	-webkit-animation: pulsate 3s ease-out;
    -webkit-animation-iteration-count: infinite; 
    opacity: 0;
}

/* Animations */

@-webkit-keyframes pulsate {
	0% { 
		opacity: 0;
	}
	50% { 
		opacity: 1.0;
	}
	100% { 
	opacity: 0;
	}
}

/* Miscellaneous */

.disable_text_highlighting {
	-webkit-user-select: none; 
	-moz-user-select: none;   
	-ms-user-select: none;  
	-o-user-select: none;
	user-select: none;
}

＆＃13;

<!DOCTYPE html>

<html class="disable_text_highlighting">

	<style type="text/css"></style>
	<link rel="stylesheet" href="style.css">
	<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
 <link rel="favicon" href="favicon.ico"/>

	<head>
		<title>Ben Buchanan</title>
	</head>

	<body>
      <div class="name-wrapper">
		<h1 class="ben_buchanan">BEN BUCHANAN<mark class="fullstop">.</mark></h1>
        <div>
	</body>

</html>

＆＃13;

减少文字和边框之间的空间？

3 个答案: