What is the best way to eliminate the gaps between elements in HTML?

Is there a way to reduce the space between the strings "Text 1" and "its simple" to just 10 pixels using margin-top: 10px;? When I apply margin-top: 10px;, the total space seems to be more than just 10 pixels due to shifting.

In my understanding, the white space is created by the font's margin. How can I adjust the size of this whitespace?

    * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    }
 
    
    .title {
        font-family: Roboto;
        font-size: 41px;
        font-weight: 900;
        text-transform: uppercase;
        color: #f9bf3b;
        text-align: center;
    }
    .simple .title_big {
        font-family: Roboto;
        font-size: 80px;
        font-weight: 900;
        text-transform: uppercase;
        color: #000000;
        text-align: center;
     }
    <h1 class="title">Text 1</h1>
    <div class="simple">
      <h2 class="big_title">its simple!</h2>
      <div class="line"></div>
    </div>
    <h2 class="title">Text 2</h2>

htmlcss

Answer №1

To ensure consistency in your design, set the line-height to 1 for the specified classes. This declaration is the same as using line-height: 100%;, indicating that it will be 100% of the font size for that particular element, not its full height.

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.title {
  font-family: Roboto;
  font-size: 41px;
  font-weight: 900;
  text-transform: uppercase;
  color: #f9bf3b;
  text-align: center;
}

.simple .title_big {
  font-family: Roboto;
  font-size: 80px;
  font-weight: 900;
  text-transform: uppercase;
  color: #000000;
  text-align: center;
}

h1.title,
h2.title_big {
  line-height: 1;
}
<h1 class="title">Text 1</h1>
<div class="simple">
  <h2 class="title_big">its simple!</h2>
  <div class="line"></div>
</div>
<h2 class="title">Text 2</h2>

Answer №2

Were you searching for something like this? I utilized a negative margin within the .simple .title_big class (specifically -15px) to eliminate some of the whitespace in the text while still maintaining a bit of spacing.

    * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    }
 
    
    .title {
        font-family: Roboto;
        font-size: 41px;
        font-weight: 900;
        text-transform: uppercase;
        color: #f9bf3b;
        text-align: center;
    }
    .simple .title_big {
        font-family: Roboto;
        font-size: 80px;
        font-weight: 900;
        text-transform: uppercase;
        color: #000000;
        text-align: center;
        margin: -15px 0;
     }
    <h1 class="title">Text 1</h1>
    <div class="simple">
      <h2 class="title_big">its simple!</h2>
      <div class="line"></div>
    </div>
    <h2 class="title">Text 2</h2>

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

Prevent the display of arrows on number input type without the use of javascript

Is there a way to remove the up/down arrows (increment/decrement) from <input type="number"> fields in Drupal 8 without using JavaScript? A client wants to prevent accidental value changes by removing these arrows. I've attempted to create a cu ...

phphtmldrupaldrupal-8drupal-fapi

Leveraging URL parameters to automatically enable the initial selection in a linked dropdown menu and trigger an OnChange event

Project Description: I have successfully implemented a search form with 5 dependent drop-down menus that are crucial for filtering data. The first dropdown, labeled dim_id, is chosen on the product_request page and triggers an OnChange event which sends th ...

javascriptphpjqueryhtmlajax

Different ways to use jquery to move to the top of an overflow div

$('.lb').click(function() { $('#modal').hide(); var id = $(this).attr('id'); var dir = '/lightbox/' + id + '.php'; $('#lightbox').find('#modal').load(dir, function() { ...

javascriptjqueryhtml

String object causing jQuery selector to malfunction

const newHTML = '<html><head><title>Hello</title><link rel="apple-icon-touch-precomposed" href="image.jpg" /></head><body></body></html>'; alert($(newHTML).find('link[rel="apple-icon-touc ...

javascriptjqueryhtmlstring

Accessing the initial element inside a DIV using CSS

In the structure of my code, I have a WYSIWYG editor enclosed in a table within a div element: <div class="mydiv"> <li> <table>My WYSIWYG</table> </li> </table> Within the WYSIWYG editor itself, there a ...

csshtml

Load data from SQL into dropdown menu and utilize selections to alter database info

As I continue to develop my skills in programming, I encountered a puzzling issue that I can't seem to figure out. My objective is straightforward: users input data into a form and are then directed to either a results page or back to the form. On the ...

phphtmlmysqlforms

AngularJS is used to vertically collapse three different div elements. This feature

I am facing an issue with the design of my page that contains three panels. Two of these panels have tables, and when viewing the page on a smaller display, it disrupts the layout. I am wondering if there is a way to add collapsible buttons to the panels s ...

htmlcssangularjs

I need either XPATH or CSS to target a specific checkbox within a list of checkboxes wrapped in span tags

I'm trying to find the XPATH or CSS locator for a checkbox in an HTML span tag that has a label with specific text, like "Allow gender mismatch". I can locate the label using XPATH, but I'm not sure how to target the input tag so I can click on t ...

csspython-2.7seleniumxpathselenium-webdriver

Visual Studio 2017 experiencing compatibility issues with Bootstrap

I've been working on creating a carousel using bootstrap within Visual Studio 2017. I utilized the NuGet package manager to install jQuery and Bootstrap, and to test its functionality, I generated a bootstrap snippet for the carousel. Take a look at ...

htmlcssbootstrap-4visual-studio-2017

Issue with background color not being displayed in print preview on Internet Explorer

How can I ensure that IE will display the circles when printing? I am currently using this code: <li ng-repeat="items in ferdigheter">{{ items.title}} <div class="circles"> <div class="circle" ng-repeat="a in thisnumber(items.stars)"&g ...

htmlcssangularjsinternet-explorerprinting

Where is the best place to store static content that does not change - in the index.html file or the top

Beginner inquiry, please forgive me Currently, I am taking online courses on YouTube to learn Vue and I am working on developing my own Vue components. As I integrate Vue components into specific parts of my webpage, I am unsure whether the remaining HTM ...

htmlvue.jsvuejs2vue-component

HTML/CSS: Issue with image grid layout where images of different heights are not wrapping correctly

I have a Wordpress-based web project in progress at the following link: The current setup of the post thumbnails grid on the website was done with the assumption that all thumbnails will be the same height. However, I am looking to modify it so that the t ...

htmlcsswordpressgrid

Vertically aligning content within neighboring flexbox containers

I am facing an issue with stacking multiple items, such as cards, horizontally with equal height. While the cards are aligning stack-wise, the image and text within each card are not adjusting to the maximum height among the cards, causing misalignment. As ...

htmlcssflexbox

Setting up automatic filtering for additional dropdown lists in Laravel is a useful feature that can enhance user

Hello! I am working with an application form and I would like to implement a feature where other dropdown lists automatically update based on the selection made in a previous dropdown. Specifically, I am looking to add a new dropdown list called "Country" ...

htmlmysqllaravellistdropdown

implement a data update feature in a Vue application using methods and Axios to manipulate

I am having trouble displaying data on a graph in my web interface using Vue js. I am fetching data from the backend to the frontend with axios, and although I can display an empty graph, the passed data is not showing up. Can someone please help me iden ...

htmlvue.jsmethodsaxios

Using React Native to create a concise text component that fits perfectly within a flexbox with a

Within a row, there are two views with flex: 1 containing text. <View style={{ flexDirection: "row", padding: 5 }}> <View style={{ flex: 1 }}> <Text>Just a reallyyyyyyyy longgggg text</Text> </View> ...

javascriptcssreactjsreact-native

The hamburger menu remains static and unresponsive on mobile screens, failing to expand as intended

I am currently facing an issue with my Bootstrap navbar in Google Chrome. When I reduce the size of the browser, the navbar menus collapse into a hamburger icon but clicking on it does not reveal the menus. The problem seems to be occurring in my app.comp ...

htmlcsstwitter-bootstrapbootstrap-4

The tooltip is obscured by the table row

I'm having trouble with a simple CSS fix and can't seem to figure out why. The z-index and overflow visibility properties are not working as expected. I just need 'In Progress' to be displayed above everything else. Some things I' ...

htmlcssangulartooltip

Utilizing JSON for HTML conversion in Codeigniter

public function getCrew(){ $search = $this->input->post('name'); if($this->input->post('ajax') && (!empty($search))){ $result = $this->model->getNames($search); foreach($result as $r){ ...

htmlajaxjsoncodeigniter

Refreshing the page in Next.js causes issues with the CSS classNames

I am currently in the process of migrating a React SPA to Next.js, and I am relatively new to this framework. The issue I am encountering is that when I initially load the Home page, everything appears as expected. However, if I refresh the page, incorrect ...

javascriptcssreactjsnext.jscss-modules