Is there a way to change the vertical spacing between two lines of text within a div element without relying on the position property?

I have a title and date section with two lines of text for my small blog. I need to reduce the vertical space between them so that they are closer together. Currently, there is a large gap. What is the best way to fix this? I've tried adjusting the position property before, but it caused issues with the overall layout of my website. I'd rather avoid changing it if possible. Thank you!

.StoriesTitle {
  font-size: 25px;
  margin-left: 23%;
  height: 10px;
}

.chinese {
  font-family: "Yu Gothic";
  font-weight: normal;
}

.StoriesDate {
  padding-bottom: 10pt;
  font-size: 12pt;
  margin-left: 1pt;
}
<section class="stories">
  <div class="StoriesTitle">
    <h2>Title Length</h2>
    <div class="StoriesDate">
      <h3>2018<span class="chinese">年</span>09<span class="chinese">月</span> 28<span class="chinese">日</span</h3>
    </div>
  </div>
</section>

htmlcssheightwhitespacedistance

Answer №1

To improve the layout of your StoriesTitle class, you can simply remove the margin from h2 and h3 tags while adding height: auto.

h2, h3 {
  margin: 0;
}

.stories {
  margin-top: 15px;
}

.StoriesTitle {
  font-size: 25px;
  margin-left: 23%;
  height: auto;
}

.chinese {
  font-family: "Yu Gothic";
  font-weight: normal;
}

.StoriesDate {
  padding-bottom: 10pt;
  font-size: 12pt;
  margin-left: 1pt;
}
<section class="stories">
  <div class="StoriesTitle">
    <h2>Title Length</h2>
    <div class="StoriesDate">
      <h3>2018<span class="chinese">年</span>09<span class="chinese">月</span> 28<span class="chinese">日</span></h3>
    </div>
  </div>
</section>

Answer №2

.TitlesStories h2 { 
  padding-bottom: 0;
}

.DatesStories h3 { 
  padding-top: 0;
}

Answer №3

Consider removing the margin from your h2 and h3 elements

.StoriesTitle {
  font-size: 25px;
  margin-left: 23%;
  height: 10px;
}

.chinese {
  font-family: "Yu Gothic";
  font-weight: normal;
}

.StoriesDate {
  padding-bottom: 10pt;
  font-size: 12pt;
  margin-left: 1pt;
}

.StoriesTitle > h2, .StoriesDate > h3 {
  margin: 0px;
}
<section class="stories">
  <div class="StoriesTitle">
    <h2>Title Length</h2>
    <div class="StoriesDate">
      <h3>
        2018<span class="chinese">年</span>09<span class="chinese">月</span> 28<span class="chinese">日</span>
      </h3>
    </div>
  </div>
</section>

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

What is the best way to merge multiple window.onscroll events together?

One feature is a colorful RGB scroller positioned next to the standard scrollbar, indicating the progress of page scroll. The second feature is a classic "scroll to top" button. FIRST FEATURE HTML <button onclick="topFunction()" id="myB ...

javascripthtmlcssscrollbar

The presence of a PDF document within an iframe is causing overlapping with another element

I am facing an issue on a screen where I have to display pdf or html content using an iframe. To show the PDF or HTML, I am using an iframe and then displaying a popup when necessary to cover the entire screen. This setup works perfectly in most browsers. ...

htmlinternet-explorerpdfiframe

HTML: Mark the chosen hyperlink or tag

In my HTML page, I am looking to keep the link selected when it is clicked on. Here is the initial HTML code: <table class="main-dev"> <tr> <td> <a class='titleForm' style="cursor:pointer"> ...

javascripthtmltypescript

Arranging divs with HTML and CSS

I am currently facing issues with the positioning of 3 scripts in my HTML file. The vertical gauge is overlapping the second circular gauge, despite trying different positioning options to no avail. How can I adjust the layout so that the vertical gauge a ...

htmlcss

Removing an item from a table row cannot be completed due to the inability to retrieve the list_body ID necessary for deletion

I have been working on enhancing the delete button function in my table. The id linked to the list_body must be incorporated into the delete function code. I utilized some jquery methods to render the list onto the webpage. //retrieve user list information ...

javascripthtmljqueryhandlebars.js

Managing account activation errors in django: A step-by-step guide

Every time I attempt to click on an email activation link in order to activate a user account after submitting a registration form, I encounter an error message that says: The connection for this site is not secure; 127.0.0.1 sent an invalid response.. The ...

pythonhtmldjangoforms

Tips for adjusting div content to fit a fixed height on all devices

Looking to adjust the size of the #left-content div based on the height of the window, while ensuring that all content is visible within the fixed #left-bg. However, when viewing on mobile or tablet devices, the content appears hidden. .left-bg{ backgro ...

javascriptcsshtml

Tips for identifying repeating id numbers within a form?

I recently completed a form with approximately 800 fields, only to realize that I accidentally gave some of the fields the same ID. Can someone please advise me on how to track down these duplicate IDs? ...

htmlformsfield

The opacity behavior of jQuery seems to behave strangely on IE10

Within my project, the left side of the content is contained within a div called ".container", and there's a preloader located in an element with the ID "#preloader." Across all major browsers, the functionality works smoothly as intended - when all ...

jquerycss

Show intricate key-value pairs in AG-Grid

I have a map containing date keys and lists of objects as values that I need to send to Angular via an API. My goal is to display this map in ag-grid for sorting based on the "amt" field. The structure of the map is as follows: { 2019-12-23 00:00:00.0: Ar ...

htmlangularsortingfrontendag-grid

What is the best way to align a set of input fields with their corresponding labels, along with a single button?

https://i.sstatic.net/xSwSH.png I am facing a specific alignment challenge in my project, especially due to the presence of labels. When I group inputs and a button together and use align items center, it works perfectly. However, the labels affect the he ...

cssbootstrap-5

What's preventing me from aligning this div in the center?

I'm trying to set up a layout with two centered columns for Tumblr posts on the left side, while keeping a sidebar on the right. Can someone help me achieve this? #wrapper /*applying styles for two columns*/ { display: inline-bloc ...

htmlcss

The component's width appears to be constrained by the use of display flex

I am currently working on a reactjs application that includes a header and another component. Initially, everything looks fine, but when I apply display: flex to their div, it seems to reduce the width of the header. Here are some images showing the issue: ...

cssreactjsflexbox

What is the best way to sort ng-options in an AngularJS select element?

I am encountering a situation where I have the following code snippet: <select ng-model="person" ng-options="person.name for person in mv.people"> However, within the mv.people array, there are certain members that I need to hide. For examp ...

htmlangularjsangularjs-ng-options

Enhanced User Experience Through Triggered Content Recommendations based on Scrolling Patterns

When a user scrolls beyond a certain point on a webpage, I would like a recommended content popup to slide out from the right side at the bottom of the page. An excellent example can be seen on USAToday where a blue recommended box appears as you scroll d ...

javascriptjqueryhtmlscroll

Encountering an error of "undefined index" while attempting to submit a form using

I'm currently facing an issue with echoing a password hash from my login form. The error message **Undefined index: signinbtn in D:\XAMPP\htdocs\login_page.php ** keeps appearing, and I can't figure out why. I have set up the form ...

phphtmlformspost

Developing a password strength checker using Javascript for ultimate security

Currently encountering an issue with my javascript project. The main goal is to validate user input against a list of known bad passwords and also their "1337" versions. Initially, checking for the basic bad password list was straightforward. However, th ...

javascripthtml

Fluid-width sidebars that don't require scrolling in a 3-column layout design (jsFiddle)

I need to design a layout with three columns, where the left column has a fixed width and the middle and right columns each take up 50% of the remaining space. It is also important that the left and right columns do not scroll along with the page. I have ...

cssfluid-layout

Embedding a styled list item within a list

How can I customize the style of list items within a list? HTML code <span class=bbb> <ul> <li>Preparing archive inquiries about study periods or work experience at LLU: <ul> <li>Within seven days - 5 ...

csshtml

What is the appropriate way to link the right function to the slideshow button?

I'm having trouble creating a functional slideshow with buttons. Each button should display its corresponding div when clicked, while the slideshow continues to function as normal. View the demo here: http://jsfiddle.net/sabeti05/dsagcc5u/ HTML ...

jqueryhtmlcssslideshow