CSS Method for Adding No Vertical Space Below Text

Method

In this article, we’ll explain how to add a

element (horizontal rule) below text in CSS without leaving any vertical space.

Read more:CSS Tutorial

Problem Description

When creating web pages using HTML and CSS, we sometimes need to add a horizontal rule below text. A common approach is to use the <hr> element, but this element automatically takes up a certain amount of vertical space, resulting in a gap between the text and the horizontal rule. This article will introduce several methods to solve this problem.

Method 1: Using Pseudo-Elements

We can use pseudo-elements in CSS to add a virtual element in place of the actual

element. This allows us to achieve a similar effect without leaving any vertical space.

hr::before { 
content: ""; 
display: block; 
border-top: 1px solid black; 
margin-top: -1px; 
} 

In the above code, we use the ::before pseudo-element in

Add an empty block-level element before the

element and set its top border to a solid 1-pixel line. Then, use a negative margin-top property to connect it closely to the text.

Method 2: Using Borders and Background Colors

Another method is to use CSS borders and background colors to simulate the effect of the

element.

We can set a block-level element’s border to a solid 1-pixel line and then set its background color to match the border color to achieve the effect of hiding the border.

hr {
border: none;
border-top: 1px solid black;
background-color: black;
height: 1px;
}

In the above code, we first set the border of the

to none, then set the top border to a solid 1-pixel line, then set the background color to black, and finally set the height to 1 pixel. This creates a horizontal line that appears to have no vertical space.

Method 3: Using Absolute Positioning and Negative Margins

Another method is to use absolute positioning and negative margins in CSS. We can

The element is absolutely positioned below the text, and negative margins are set to eliminate the space between it and the text.

<div class="container"> 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
<hr class="line"> 
</div> 

.container { 
position: relative; 
} 

.line { 
position: absolute; 
bottom: 0; 
left: 0; 
width: 100%; 
height: 1px; 
border-top: 1px solid black; 
margin: 0; 
padding: 0; 
} 

In the above code, we first set the parent container that wraps the text and

to relative positioning. Then, we set the

element to absolute positioning and position it at the bottom of the parent container. We then set a solid line width of 100%, a height of 1 pixel, a top border of 1 pixel, and zero margins and padding to create a horizontal line with zero vertical space.

Summary

This article introduced three CSS methods for adding a

element below text without leaving any vertical space. By using pseudo-elements, borders and background colors, and absolute positioning and negative margins, we can achieve a similar effect to

without leaving any vertical space. Depending on your needs, you can choose the method that suits you best to achieve the desired layout effect.