Question

我实际上是在创建一个“滑门”动画，中间是“HELLO”，当门打开时会分成两半。左边的文字是向右推到左边“门”/ div边缘的字母，而右边的文字左边有一个小小的间隙（“LO！”）。我检查了开发控制台，并没有看到任何可能导致此问题的填充，边框或边距。这显然不是什么大问题，但我怎么能在“LO”中推出字母“L”。冲到它所在的div /门容器的边缘？

html, body {
  height: 100%;
  width: 100%; }

.container {
  border: 1px solid black; }

.doors {
  height: 100vh;
  width: 50vw;
  border: 1px solid blue;
  position: absolute;
  display: inline-flex;
  align-items: center; }

#left-door {
  background-color: #1c1b1a;
  left: 0;
  transition: all 1s;
  justify-content: flex-end; }

#right-door {
  background-color: #f9d73e;
  right: 0;
  transition: all 1s;
  justify-content: flex-start; }

.slide-right {
  margin-right: -100%; }

.slide-left {
  margin-left: -100%; }

.door-text {
  font-family: 'Lato', san-serif;
  height: 100px;
  width: 50%;
  font-size: 4em;
  line-height: 100px;
  font-weight: 900; }

#text-left {
  text-align: right;
  color: #f9d73e; }

#text-right {
  text-align: left;
  color: #1c1b1a; }

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<title>Portfolio</title>
	<!-- Bootstrap CDN -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
	<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
	<link rel="stylesheet" href="./home.css">
</head>
<body>
	<div id="left-door" class='doors'>
		<h1 id="text-left" class="door-text">HEL</h1>
	</div>
	<div id="right-door" class='doors'>
		<h1 id="text-right" class="door-text">LO!</h1>
	</div>
	<div class="container">
		<h1>this is the body</h1>
	</div>
	

	<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
	<script src="./home.js"></script>
</html>

Answer 1

这封信＆＃34; L＆＃34;我认为正在占据它的正常空间。您可以使用负缩进手动更正小间隙，如下所示：text-indent: -5px;

＆＃13;

html, body {
  height: 100%;
  width: 100%; }

.container {
  border: 1px solid black; }

.doors {
  height: 100vh;
  width: 50vw;
  border: 1px solid blue;
  position: absolute;
  display: inline-flex;
  align-items: center; }

#left-door {
  background-color: #1c1b1a;
  left: 0;
  transition: all 1s;
  justify-content: flex-end; }

#right-door {
  background-color: #f9d73e;
  right: 0;
  transition: all 1s;
  justify-content: flex-start; }

.slide-right {
  margin-right: -100%; }

.slide-left {
  margin-left: -100%; }

.door-text {
  font-family: 'Lato', san-serif;
  height: 100px;
  width: 50%;
  font-size: 4em;
  line-height: 100px;
  font-weight: 900; }

#text-left {
  text-align: right;
  color: #f9d73e; }

#text-right {
  text-align: left;
  color: #1c1b1a; 
  text-indent: -5px;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<title>Portfolio</title>
	<!-- Bootstrap CDN -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
	<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
	<link rel="stylesheet" href="./home.css">
</head>
<body>
	<div id="left-door" class='doors'>
		<h1 id="text-left" class="door-text">HEL</h1>
	</div>
	<div id="right-door" class='doors'>
		<h1 id="text-right" class="door-text">LO!</h1>
	</div>
	<div class="container">
		<h1>this is the body</h1>
	</div>
	

	<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
	<script src="./home.js"></script>
</html>

＆＃13;

这个微小的空间/间隙来自哪里？

1 个答案: