Excessive gap located above the section element

On the web page I'm practicing with, I've noticed an unwanted space at the top of the "Favorite Food" section. To center my unordered list, I made the "section" elements inline-block, but this created the issue. How can I remove that space at the top of the "Favorite Food" section?

h1{
    background-color: #00F88F;
    color: rgb(255,0,0);
}

header{
    background-color: #00EEEE;
    font-variant: small-caps;
    font-size: 150%;
    text-align: center;
}

section{
    width: 45%;
    display: inline-block;
    text-align: center;
}

ul{
    display: table;
    text-align: left;
    margin: 0 auto;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Introduction to HTML Submission</title>
</head>
<body>
    <header>
    <h1>Pratyay Mukherjee</h1>
        <nav>
            <a href="http://www.google.com" target="_blank">One</a>
            <a href="http://www.coursera.org" target="_blank">Two</a>
            <a href="https://en.wikipedia.org/wiki/Michael_Schumacher" target="_blank">Three</a>
            <a href="https://validator.w3.org/nu/" target="_blank">Validator</a>
        </nav>
    </header>
    <section>
        <h2>Favorite Foods</h2>
        <ul>
            <li>Pineapple</li>
            <li>Chicken Curry</li>
            <li>Fish Curry</li>
            <li>Meat Biriyani</li>
        </ul>
    </section>
    <section>
        <h2>Achievements</h2>
        <label for="m1">Progress in this course (100%)</label>
        <progress id="m1" value=100 max="100"> 100% </progress><br>
        <label for="m2">Progress in the Specializaton capstone (20%)</label>
        <progress id ="m2" value="20" max="100"> 20% </progress><br>
        <label for="m3"> Progress in life goals (33%)</label>
        <progress id="m3" value="33" max="100"> 33% </progress>
    </section>
    <section>
        <h2>More About Me</h2>
        <details>
            <summary>My Childhood</summary>
            <p>I was born in Kolkata, India on 20<sup>th</sup> Decemeber 1998. I loved to paint and play the piano since a very young age. I love the mountains and travelling</p>
        </details>
    </section>
    <footer>
        <img src="http://www.intro-webdesign.com/images/newlogo.png">
        This page was created by Pratyay Mukherjee and Colleen van Lent. To learn more about web design, visit <a href="http://intro-webdesign.com/">Intro to Web Design</a>
    </footer>
</body>
</html>

htmlcss

Answer №1

If you're having trouble with how inline-block elements align vertically, try adding vertical-align:top to your section styling.

h1{
    background-color: #00F88F;
    color: rgb(255,0,0);
}

header{
    background-color: #00EEEE;
    font-variant: small-caps;
    font-size: 150%;
    text-align: center;
}

section{
    width: 45%;
    display: inline-block;
    text-align: center;
    vertical-align:top;
}

ul{
    display: table;
    text-align: left;
    margin: 0 auto;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Introduction to HTML Submission</title>
</head>
<body>
    <header>
    <h1>Pratyay Mukherjee</h1>
        <nav>
            <a href="http://www.google.com" target="_blank">One</a>
            <a href="http://www.coursera.org" target="_blank">Two</a>
            <a href="https://en.wikipedia.org/wiki/Michael_Schumacher" target="_blank">Three</a>
            <a href="https://validator.w3.org/nu/" target="_blank">Validator</a>
        </nav>
    </header>
    <section>
        <h2>Favorite Foods</h2>
        <ul>
            <li>Pineapple</li>
            <li>Chicken Curry</li>
            <li>Fish Curry</li>
            <li>Meat Biriyani</li>
        </ul>
    </section>
    <section>
        <h2>Achievements</h2>
        <label for="m1">Progress in this course (100%)</label>
        <progress id="m1" value=100 max="100"> 100% </progress><br>
        <label for="m2">Progress in the Specialization capstone (20%)</label>
        <progress id ="m2" value="20" max="100"> 20% </progress><br>
        <label for="m3"> Progress in life goals (33%)</label>
        <progress id="m3" value="33" max="100"> 33% </progress>
    </section>
    <section>
        <h2>More About Me</h2>
        <details>
            <summary>My Childhood</summary>
            <p>I was born in Kolkata, India on 20<sup>th</sup> December 1998. I loved to paint and play the piano since a very young age. I love the mountains and traveling</p>
        </details>
    </section>
    <footer>
        <img src="http://www.intro-webdesign.com/images/newlogo.png">
        This page was created by Pratyay Mukherjee and Colleen van Lent. To learn more about web design, visit <a href="http://intro-webdesign.com/">Intro to Web Design</a>
    </footer>
</body>
</html>

Answer №2

To eliminate the gap, include margin: 0 !important; below h1 in your CSS.

h1{
    background-color: #00F88F;
    color: rgb(255,0,0);
    margin: 0 !important;
}

header{
    background-color: #00EEEE;
    font-variant: small-caps;
    font-size: 150%;
    text-align: center;
}

section{
    width: 45%;
    display: inline-block;
    text-align: center;
}

ul{
    display: table;
    text-align: left;
    margin: 0 auto;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Introduction to HTML Submission</title>
</head>
<body>
    <header>
    <h1>Pratyay Mukherjee</h1>
        <nav>
            <a href="http://www.google.com" target="_blank">One</a>
            <a href="http://www.coursera.org" target="_blank">Two</a>
            <a href="https://en.wikipedia.org/wiki/Michael_Schumacher" target="_blank">Three</a>
            <a href="https://validator.w3.org/nu/" target="_blank">Validator</a>
        </nav>
    </header>
    <section>
        <h2>Favorite Foods</h2>
        <ul>
            <li>Pineapple</li>
            <li>Chicken Curry</li>
            <li>Fish Curry</li>
            <li>Meat Biriyani</li>
        </ul>
    </section>
    <section>
        <h2>Achievements</h2>
        <label for="m1">Progress in this course (100%)</label>
        <progress id="m1" value=100 max="100"> 100% </progress><br>
        <label for="m2">Progress in the Specializaton capstone (20%)</label>
        <progress id ="m2" value="20" max="100"> 20% </progress><br>
        <label for="m3"> Progress in life goals (33%)</label>
        <progress id="m3" value="33" max="100"> 33% </progress>
    </section>
    <section>
        <h2>More About Me</h2>
        <details>
            <summary>My Childhood</summary>
            <p>I was born in Kolkata, India on 20<sup>th</sup> Decemeber 1998. I loved to paint and play the piano since a very young age. I love the mountains and travelling</p>
        </details>
    </section>
    <footer>
        <img src="http://www.intro-webdesign.com/images/newlogo.png">
        This page was created by Pratyay Mukherjee and Colleen van Lent. To learn more about web design, visit <a href="http://intro-webdesign.com/">Intro to Web Design</a>
    </footer>
</body>
</html>

Answer №3

h1{
    background-color: #00F88F;
    color: rgb(255,0,0);
}

header{
    background-color: #00EEEE;
    font-variant: small-caps;
    font-size: 150%;
    text-align: center;
}

section{
    text-align: center;
}

ul{
    display: table;
    text-align: left;
    margin: 0 auto;
}

.wrapper{
  display: flex;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8>
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Introduction to HTML Project</title>
</head>
<body>
    <header>
    <h1>John Doe</h1>
        <nav>
            <a href="http://www.example.com" target="_blank">One</a>
            <a href="http://www.testwebsite.com" target="_blank">Two</a>
            <a href="https://en.wikipedia.org/wiki/Example_Page" target="_blank">Three</a>
            <a href="https://validator.w3.org/nu/" target="_blank">Validator</a>
        </nav>
    </header>
    <section class="wrapper">
    <section>
        <h2>Favorite Movies</h2>
        <ul>
            <li>Action</li>
            <li>Comedy</li>
            <li>Drama</li>
            <li>Sci-Fi</li>
        </ul>
    </section>
    <section>
        <h2>Goals for the Future</h2>
        <label for="g1">Health Goals (50%)</label>
        <progress id="g1" value=50 max="100"> 50% </progress><br>
        <label for="g2">Career Goals (75%)</label>
        <progress id ="g2" value="75" max="100"> 75% </progress><br>
        <label for="g3"> Personal Development (90%)</label>
        <progress id="g3" value="90" max="100"> 90% </progress>
    </section>
    <section>
        <h2>Hobbies</h2>
        <details>
            <summary>Traveling</summary>
            <p>I enjoy exploring new places and experiencing different cultures.</p>
        </details>
    </section>
    </section>
    <footer>
        <img src="http://www.example.com/logo.png">
        This website is maintained by John Doe. For more information, visit <a href="http://example.com/">Example Website</a>
    </footer>
</body>
</html>

Feel free to utilize the flexbox feature!

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

Using CSS alone to maintain responsive aspect ratios: A solution to filling container heights

I'm trying to find a way for an inner div to fill the height of its container with a fixed aspect ratio of 1:1. The usual method using padding works great for filling the width, but not so much for the height. Is it possible to achieve this purely wi ...

htmlcssresponsive-design

The dropdown list is nowhere to be found in the page source when using Selenium

Currently, I am engaged in web scraping using Selenium. Successfully locating the input box and entering ID numbers is no issue. Yet, a roadblock presents itself - there is no submit button linked to the search bar. Once the numbers are inputted, the box a ...

pythonhtmlseleniumweb-scrapingmicrosoft-edge

Adjusting the image placement within a modal window (using bootstrap 3)

Behold, an example modal: <!-- Large Modal --> <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"> <div class="modal-dialog modal-lg"> <div class="modal-content"> ...

javascriptjqueryhtmlcsstwitter-bootstrap

Ways to Adjust the Earth's Position in WebGL Earth

I have been working with this WebGL Earth component for my project, but I am facing difficulty in adjusting the position of the planet on the canvas. My intention was to place the planet at the bottom of the page, but I haven't been able to achieve th ...

javascriptcsswebgl-earth

Guide to making a button in jQuery that triggers a function with arguments

I've been working on creating a button in jQuery with an onClick event that calls a function and passes some parameters. Here's what I have tried so far: let userArray = []; userArray['recipient_name'] = recipient_name.value; userArray[ ...

javascripthtmljquerydatatables

Sending an HTML form data to a Node.js server

I'm currently working on a simple project that involves creating a web form and sending it to node.js in order to save the information received. I've been following some YouTube tutorials (https://www.youtube.com/watch?v=rin7gb9kdpk), but I' ...

htmlnode.jsexpresshttppost

I am experiencing issues with the detection of mouseover events on an SVG circle

I am currently working on a d3 map with zoom functionality that displays circles representing different cities. However, I am facing an issue where the mouseover event for the circles (which shows tooltips and clicking reveals some lines) seems to only reg ...

javascripthtmlcsssvgd3.js

Tips for allowing a position:absolute <div> to expand as though it were containing a lengthy <p>innerText

This div automatically adjusts its width to fit the content inside, even if it extends beyond the page boundaries. Is there a way to make this div expand to fill the entire width of the page without needing a paragraph? <div style="position:absolute;le ...

htmlcsswidthcss-position

Hide the button with jQuery Ajax if the variable is deemed acceptable upon submission

I need to figure out how to hide the submit button if the email entered is the same as the one in the database from action.php. Can anyone help me with integrating this functionality into my existing code? <form onsubmit="return submitdata();"> ...

javascriptphpjqueryhtmlajax

Using jquery/offset to position a div causes it to float, but it does not take

<script type="text/javascript"> $(document).ready(function () { var top = $('#rt_outer').offset().top - parseFloat($('#rt_outer').css('marginTop').replace(/auto/, 0)); $(window).scroll(function (event) { // det ...

jqueryhtmlscrollhashmap

The code for the bouncing image isn't functioning properly outside of the JSFiddle environment

I'm having issues with this jQuery snippet in my web application. It works fine on jsfiddle, but not when I add it to my project. Here's the code: $('.myimage').mouseenter(function() { $(this).effect('bounce',500); }); Her ...

javascriptjqueryhtml

The user can witness the appearance of a scrollbar when utilizing the

Struggling to remove the scroll bar from my ion-scroll. Have tried various methods but nothing seems to work. Need assistance with this, please! Attempted using all attributes and even used CSS like ::-webkit-scrollbar with display: none;, which hides it ...

htmlcssionic-frameworkionic3

aligning a floating image vertically

One issue I am facing in my UI is that I have buttons with images floating next to text. While the setup works well, I am struggling to vertically align the image with the text. I've experimented with various solutions including using vertical-align: ...

htmlcss

Troubles with basic jQuery hide and show functionalities

Hey there! I've been working on a project for the past couple of days and I'm having trouble with creating a slider effect using jQuery hide and show. It's strange because my code works perfectly fine with jquery-1.6.2.min.js, but when I swi ...

jqueryhtmlcss

How can I include line breaks using HTML `<br>` tags in a textarea field that is filled with data from a MySQL

Within a modal, I am showcasing a log inside a read-only <textarea> field that contains data fetched from my MySQL database. Below this, there is a writable <textarea> field where users can input updates to the log, which are then added to the ...

javascriptphpjqueryhtmlmysql

Storing multiple email addresses in an array using an HTML input element

I have a small React Bootstrap form where I am trying to save multiple email addresses entered by the user into an array. However, when I use onChange={()=> setEmails(e.target.value as any} it stores them in string format like this --> [email p ...

javascripthtmlreactjstypescript

Struggling with css margins and div image constraints, seeking guidance and tips for resolution

Struggling with creating a dynamic gallery that works smoothly in jsfiddle but encounters multiple issues when integrated into WordPress. The main problem is the excessive stretching of margins between image titles and meta-data, leading to misalignment an ...

javascriptjqueryhtmlcssmargins

Tips for showcasing a complete background image in a div even if the content inside is minimal

Check out the header image on ink.talentosoft.com if you get a chance. The height of the header image is precisely 388 px. I am looking to have the background of this div fully displayed. Currently, the setup for the div looks like this: background: url ...

cssbackground-image

Add two columns for mobile devices in the Woocommerce platform

How can I display 2 columns of products in my Woocommerce shop using a child theme based on 'Shopisle'? Is a CSS-only solution the best approach for this task, and will it work smoothly without any bugs? I suspect that the theme is built on Boot ...

csswordpresswoocommerce

What is the best way to connect internal files within Angular?

I am encountering an issue when trying to connect my login page from the navbar. Here is the code snippet for the navbar that I have: <div class="navbar-container"> <ul id="slide-out" class="side-nav center-align"> <li> <d ...

htmlangularangular2-routingfilepathrouterlink