CODEWITHSUNDEEP
htmlcss
Ben Buchanan
Ben Buchanan

Reputation: 23

Reduce space between text and border?

I am creating a web portal social media page. I want the text in the middle of the page to have a border around it relatively close to the text. However, whenever I add a border in my CSS it seems to border the entire page rather than the text. Is there anyway to reduce the amount of space in between my text and border?

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>

Here's how it currently looks:

enter image description here

Here is the code on pastebin.

Upvotes: 2

Views: 1310

Answers (3)

David Chelliah
David Chelliah

Reputation: 1349

You are applying the border to H1 div, which takes up 90% height of your page. So a border around that would appear at the edge of the screen- Not around your text.

In your case, you can have a wrapper div around your H1 tag which should have display:flex and height defined to it. Then use vertical-align: middle; to makes all inner content elements to be vertically centered.

H1 has display block that will allow it to take entire screen width. So to have your border right near the left and right of the content. Make your H1 as display:inline-block so that vertical align will have its effects on it. And apply margin:0 auto that should make the text horizontally centered.

So your text will be finally center aligned in the page (vertical & horizontal) with the border around it.

You can increase the space around border and the text, by applying padding to the h1.

Check out the below snippet

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

Upvotes: 0

gavsta707
gavsta707

Reputation: 365

You can first set your h1 style to be something like this:

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

Then, set the display in css like:

h1{
   display:inline;
}

That should fix your problem with the border not wrapping around the text.

Upvotes: 1

rvighne
rvighne

Reputation: 21897

The border applies to the entire "bounding box" of the element. Since you have specified a width and height for the element, the border will be around that area.

The solution would be to create an inline element inside the .ben_buchanan element, and this is the element that actually contains the text and the border.

So

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

becomes

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

And you apply the border to .inside_text.

Upvotes: 1

Related Questions