Align the text within the span element to be at the top of its containing

How can I align the text with the very top border of its span element?

In this snippet, there seems to be some extra space caused by the line-height property. Is there a workaround for this?

.name {
  display: inline-block;
  line-height: 1.25;
  font-size: 45px;
}
.firstname {
  display: block;
  background: #FFAACC;
  margin-bottom: 5px;
}
<div>
  <div class="ej ej1">
    <span class="name">
      <span class="firstname">Something Name</span>
    <span class="username">
        @somthig-name
        </span>
    </span>
  </div>
</div>
htmlcsstextvertical-alignment

Answer №1

I'm not quite sure what you mean by the reference to "little “padding” due to the line-height." Let me provide my interpretation of the puzzle. 

body {
  margin:0;
  padding:0;
}
.name {
  margin-top:-0.9rem;
  display: inline-block;
  line-height: 1.25;
  font-size: 45px;
}
.firstname {
  display: block;
  background: #FFAACC;
  margin-bottom: 5px;
}
<div>
      <div class="ej ej1">
        <span class="name">
          <span class="firstname">Something Name</span>
        <span class="username">
            @somthig-name
            </span>
        </span>
      </div>
    </div>

Answer №2

If you want to achieve the desired result, you will need to adjust the line-height for each HTML tag manually. It seems like this is exactly what you are looking for.

.title {
  display: inline-block;
  line-height: 33px;
  font-size: 45px;
}
.subtitle {
  display: block;
  background: #FFAACC;
  margin-bottom: 5px;
  padding-bottom:10px;
  margin-top:10px;
}
<body style="margin:0px;">
<div>
  <div class="section section1">
    <span class="title">
      <span class="subtitle">Some Title</span>
    <span class="description">
        @some-description
        </span>
    </span>
  </div>
</div>
</body>

Answer №3

It appears that the issue lies in the <body> element's 8px margin... Give this a try

.title {
  display: block;
  line-height: 1.5;
  font-size: 20px;
}
.subtitle {
  display: inline-block;
  background: #EFEFEF;
  margin-top: 10px;
}
<body style="margin:0;">
<div>
  <div class="section section1">
    <h2 class="title">
      <span class="subtitle">Sample Title</span>
    <span class="author">
        @sample-author
        </span>
    </h2>
  </div>
</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

Select multiple items from a list in HTML using the power of jQuery with a Multi Select

I'm facing an issue with the multi-select box. I attempted to choose multiple values using jQuery, but only the last one seems to be selected. Can someone assist me, please? Below is my code: <script> $(function(){ <?php foreach ($selectd ...

phpjqueryhtml

JSON is displaying [object object] rather than the expected values

I'm attempting to extract the values from a JSON, but when I try to retrieve them, I keep getting an object object. Could I have made a mistake in my decoding process? Here is the PHP decoding code: <?php $contenido = file_get_contents("https://w ...

phphtmljsonmatrix

If the variable state is modified using setInterval, Angular animations will not function as intended

I am attempting to create an animation that changes the opacity of three arrows (intended for user interaction on my website). To achieve this automatically and repeatedly upon loading the webpage, I have implemented a setInterval function within ngOnInit. ...

javascripthtmlcssangulartypescript

Flexible DIV Grid Design with Overlapping Absolute Div Elements

My goal is to replicate the layout shown in this screenshot view screenshot here I want the layout to be responsive, with DIV B moving below DIV A when the screen is resized. DIV B is positioned absolutely to cover content and DIV C. Both DIV C and DIV ...

htmlcsswordpress

CSS: Relative positioning and scrolling of child elements within a parent container

I am searching for a solution to scroll a panel located beneath a non-scrolling panel. Here is an example of what I am attempting to achieve: http://jsfiddle.net/zh59w/ Essentially, the 'stay on top' element needs to remain at the top while all ...

cssscrollposition

Tips for activating and setting up Bootstrap popovers

I've been trying to add some popovers to my webpage, but I'm facing a hurdle. I added a few button popovers in the footer, but nothing happens when they're clicked. I created a js file for initialization and imported it at the end of my pa ...

javascripthtmlbootstrap-5bootstrap-popover

Can someone help clear up this confusion with CSS?

Why is image 6.png selected, when all the images are direct descendants of the div shape? Thank you for your assistance, it's greatly appreciated. As far as I know, it should select all the divs because they are all direct descendants of the div #shap ...

javascripthtmlcss

How can I resolve the issue with the HTML/CSS footer not functioning properly on Safari for iPhone in my mobile site?

Struggling with a mobile website issue here. The client wants text-based buttons/links at the bottom, so I added them in, but my skills with size percentages are a bit rusty. I need these buttons to line up horizontally and adjust their width accordingly ...

htmliphonecssmobilefooter

Retrieve the text from an ajax response that includes the <tag> element

I have created a simple piece of code to fetch news from an RSS page. Below is the code snippet: this.loadRecentNews = function loadRecentNews() { $.get("http://rss.nytimes.com/services/xml/rss/nyt/GlobalHome.xml", function (data) { ...

javascriptajaxtextextract

Hide the background when the modal appears

I have successfully implemented a jQuery CustomBox modal on my website. However, I am facing an issue with hiding the content div behind the modal once it pops up. My goal is to make the content div reappear after the modal has been closed. You can view a ...

javascriptjqueryhtmlcssmodal-dialog

PHP: Incorrect URL formats with or without a variable present

I am currently working on customizing a PHP web application and could use some assistance. The Application is originally set up to operate in the ROOT path of the Webserver. I have made some modifications to make it work in different paths, but I am facing ...

phphtmlvariables

Need help restarting a timer I've built in Angular with just a click?

I am in the process of developing a compact application that will help me keep track of my activities within a specific time frame. Once I input an activity into a field and click "OK," it should be added to a list. My current challenge lies in resetting ...

htmlangulartypescript

Events in Three.js have an impact on the Document Object Model (

Here's a simple question for you. Is it possible to create click events in a three.js scene that can manipulate the DOM? For example, if an object is clicked in the scene, can it make a panel outside the scene become visible? Thank you! ...

javascripthtmlthree.js

Adjust the value based on selection

I aim to display another div when either the Full Time or Part Time option is selected. Additionally, I would like to calculate a different value for each option; if 'Part Time' is chosen, PrcA should change to PrcB. Here is the code snippet tha ...

javascripthtmlfunctionselect

Struggling to locate the Twitter direct message input box with Xpath in Selenium

I have been struggling to locate the textbox element using the find_element_by_xpath() method. Unfortunately, every time I try it, I receive an error stating that the element cannot be found. Here is the specific line of code in question: Despite attempti ...

pythoncssseleniumxpath

Establish the directory for javascript and css files following the designated URL rewriting regulations in the .htaccess file

Currently in the process of rewriting my URLs by configuring rules in the .htaccess file. The current version of my .htaccess file looks like this: Options +FollowSymlinks RewriteEngine on AddType text/css .css RewriteRule ^lunettes-collection/([ ...

javascriptphpcss.htaccessurl-rewriting

Using both Bing and Google geolocation services due to compatibility with Internet Explorer

Hey there! I'm currently working on implementing geolocation functionality into my project, and it's been smooth sailing except for one hiccup - Internet Explorer doesn't seem to play nice with Google Maps and prefers Bing instead. Has anyon ...

jqueryhtmlgeolocation

The functionality of the delete button in Datatables is only operational on the initial page, failing to

My datatable is giving me trouble. The delete button in the action column only works on the first page, but not on the other pages. Here is the code for my delete button: <table id="example" class="table table-striped table-bordered" cellspacing="0" wi ...

javascriptjqueryhtmlajaxdatatables

Gradually reveal each individual path of the SVG, one by one

I am faced with an SVG containing numerous paths like the following: <svg version="1.1" id="svg2" inkscape:version="0.91 r13725" sodipodi:docname="drawing.svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:svg="http://w ...

jquerycsssvgsvg-animate

Dynamic background image coupled with navigation buttons

Within the realm of Bootstrap 3, I've crafted a navbar that showcases a background image alongside a series of menu items positioned below said image: The following snippet of CSS handles the background image: .navbar-fixed-bottom .navbar-collapse ...

htmlcsstwitter-bootstrap-3background-imagenavbar