CODEWITHSUNDEEP
htmlcss
WonkasWilly
WonkasWilly

Reputation: 573

Where is this tiny bit of space/gap coming from?

I'm essentially creating a "sliding-door" animation with the words "HELLO" in the middle, that will split in half as the doors open. The text on the left has letters pushed right up to the edge of the left "door"/div, while the text on the right has a tiny little gap on the left (the "LO!"). I checked with the dev console, and don't see any padding, border, or margin that could be causing this. It's obviously not a big deal, but how can I push the letter "L" in "LO!" flush up against the edge of the div/door container that it's in? 

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>

Upvotes: 1

Views: 39

Answers (1)

Daniel Sixl
Daniel Sixl

Reputation: 2499

The letter "L" is taking up it's normal space I think. You could correct the small gap manually with a negative indent, like this: text-indent: -5px;

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;
}
<!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>

Upvotes: 2

Related Questions