What is the best way to ensure text in a paragraph remains at the bottom of a div without any additional space below it?

I would like the text and its border to remain fixed at the bottom of the body element. Additionally, I want the text to be positioned right at the edge of the div boundary.

@import url(https://fonts.googleapis.com/css?family=Bungee);
body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.text {
  height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Bungee';
  font-size: 5em;
}

p {
  border: solid 8px;
  padding: 0px 40px;
}
<body>
  <div class="text">
    <p>TEXT</p>
  </div>
</body>

htmlcss

Answer №1

Two possibilities:

  1. Include margin-bottom:0 to the 'p' element as shown below
  2. Use <div> instead of <p> with no additional styling.

Explanation: The paragraph tag is styled automatically, which results in spacing in your scenario. This behavior may differ across browsers/versions.

@import url(https://fonts.googleapis.com/css?family=Bungee);
body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.text {
  height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Bungee';
  font-size: 5em;
}

p {
  border: solid 8px;
  padding: 0px 40px;
  margin-bottom: 0;
}
<body>
  <div class="text">
    <p>TEXT</p>
  </div>
</body>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Stop SCSS from processing CSS variables in Angular-CLI

I am currently using Angular5 with sass v1.3.2. My goal is to dynamically change a color that is widely used in the scss files of my single page app without having to recompile new files. This color is globally defined in my _variables.css as: $brand: # ...

cssangularsass

There is a slight misalignment when trying to horizontally center a character within a div

I've experimented with various methods like using a px width or em widths. I've attempted nesting a span and trying different styles such as text-align:center or margin:0 auto. I can manage to center either the R or the S, but struggling to get ...

css

Pattern to locate a CSS class identifier

I've been working on creating a regex to match valid CSS class name structures. Currently, my progress looks like this: $pattern = "([A-Za-z]*\.[A-Za-z]+\s*{)"; $regex = preg_match_all($pattern, $html, $matches); However, there are certai ...

phpcssregex

Formatting Issue with HTML Form (Width Exceeding Specifications)

Currently, I am in the process of creating a table that contains various forms and buttons within the cells. However, there seems to be excess space between the buttons which is giving the appearance of the form being too wide. I have been attempting to di ...

htmlcss

Unable to delete a segment of text within the description of each individual article division using jQuery

In an effort to clean up the article descriptions on my website's homepage, I am seeking a solution to remove the {AC} text that appears at the beginning of each description. While attempting to use the jQuery code provided below, I encountered an iss ...

javascriptjqueryhtml

Unable to extract HTML text using Selenium Java

Here is the HTML code I am working with: <span id="slotTotal"> <span id="slotUsed">4</span> /16 </span> I am trying to extract the text "/16" but encountering an issue when using this code: slotTot = driver.findElem ...

javahtmlseleniumgettext

Exploring the world of JQuery Ajax selectors

I am attempting to create a comment system similar to the one found at . I have the AJAX code below, but I am having trouble uniquely selecting text areas for each post. The issue is that the number of posts can vary, so it's important that each post ...

phphtmljquerypost

The columnFilter plugin in Datatables is failing to initialize

I have a pre-existing table that needs to be customized and initialized properly. <table id="currencies-table" class="table table-striped table-bordered table-hover form-data-table"> <thead> <tr> <th style="width: 10px;" ...

javascriptjqueryhtmljspdatatables

What is preventing BODY from respecting min-height: 100% ?

Struggling to create a basic webpage with a container that extends to the bottom? Here's what I'm aiming for: #Main should be as tall as the viewport, but able to stretch further with additional content. body should match the viewport height, y ...

htmlcssheightdocument-body

Suggestions for resetting the input field IDs in a cloned div after deletion

In the given HTML code snippet, there is a <div> containing two input fields as shown below: <button type = "button" id = "add-botton" >Add Element </button> <div id = "trace-div1" class = "trace"> <h4><span>Trac ...

javascriptphpjqueryhtml

What is the best way to ensure the website title is displayed properly on a mobile browser?

Concern I have been encountering difficulties while constructing a portfolio website using bootstrap 5. The issue arises with the navbar, causing the Title to overlap the hamburger menu and extend beyond the edge of the screen. Strangely enough, this prob ...

htmlcssnavbarbootstrap-5mobile-browser

Transforming a radio button into a checkbox while successfully saving data to a database (toggling between checked and unchecked)

I have limited experience in web development, but I recently created a webpage that allows users to input data into an SQL database. While my code is functional, I believe there's room for optimization. I pieced it together from various online resourc ...

javascriptphphtml

guidelines for quotes in playframework templates

Looking at the tutorial on Playframework's website, the instructor demonstrates a simple example and eventually includes a javascript (coffeescript) file for creating a dynamic list. In the index.scala.html template file, he adds this code: <scri ...

javahtmlscalaplayframeworkplayframework-2.0

Is it acceptable to store HTML in a content database?

I am considering storing HTML in a database, but I want to ensure it is safe. If I restrict who can submit the content, do you think it would be secure enough? My question is quite straightforward. I run a platform that provides video tutorials and variou ...

phphtmldatabasesecurity

Use CSS Grid to anchor the final element to the right side of a horizontal navigation menu

I am facing an issue with my horizontal navigation bar that contains a dynamic number of links. In this specific case, there are 3 links displayed below: https://i.sstatic.net/f5vcn.png My goal is to keep the first two links in their original position an ...

htmlcssflexboxcss-grid

Tips for customizing the CSS of a child component that has been imported from a different module in Angular 2

I have been using agm-snazzy-window from amg-snazzy-window There is a mention that I can modify the css class, but when I try to do so, it doesn't seem to work. Here is an example: map-component.html <agm-snazzy-info-window [closeWhenOthersOp ...

cssangularsass

What is the best method for inserting dynamic HTML content (DIV) with JavaScript?

Can someone assist me in dynamically adding HTML content when data is returned from the server-side? I am currently using ajax/jQuery to handle server-side processing requirements. The success code section of my ajax function allows me to write HTML elemen ...

javascriptjqueryhtmlajax

Angular service unable to maintain data continuity across multiple controllers

I am facing an issue while attempting to set the title in controller1 using a service and then accessing the updated title in controller2. The function sharedProperties.setTitle(title) works perfectly fine in controller1, however, in controller2, I keep g ...

htmlangularjsangularjs-scopeangular-services

Is there a Facebook application embedded in the user's wall?

Is it feasible to create a website similar to YouTube, where users can share it on Facebook and run the app (in this case, the video player) directly on their wall without having to visit the YouTube page? If it is possible, is this functionality limited ...

javascriptfacebookflashhtml

CSS: Select the final child within a parent element depending on the specific class assigned to the child element

Is there a way to change the text color of 5 to red? I've tried some solutions, but nothing seems to work. Any ideas on how to fix this issue? Please Note: This example is just a simplified version of the actual problem, so the structure and quantit ...

htmlcsscss-selectors