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

Programming in Python often involves utilizing a combination of powerful libraries such as BeautifulSoup,

I am currently developing a program that is designed to extract emails and collect specific links from them, particularly those from Newegg. I have successfully used iMAP to log in and access the HTML content of the emails. However, I am encountering an is ...

pythonhtmlbeautifulsouppython-requestsimap

Issue with Bootstrap Carousel: all elements displayed at once

I'm in the process of building a carousel. I have set up the structure, but I only want five blocks to be visible initially, with the sixth block appearing after clicking an arrow. How can I achieve this? My strategy: (adopted from here) img{ b ...

javascripthtmlcssbootstrap-4carousel

Buttons for concealment and revelation are unresponsive

I have the following code snippet for uploading an image, which is taken from a template utilizing bootstrap 2. <div class="span6"> <div class="control-group"> <label class="control-label">Imagen</label> <div cla ...

javascriptjqueryhtmltwitter-bootstrap

Tips for correctly linking JS and CSS resources in Node.js/Express

I have a JavaScript file and a stylesheet that I am trying to link in order to use a cipher website that I created. Here is my File Path: website/ (contains app.js/html files and package json) website/public/css (contains CSS files) website/public/scri ...

javascripthtmlcssnode.jsexpress

Issues with div placement arise when incorporating relative positioning and floats

I have been attempting to position two divs with images next to the other divs but they appear underneath them instead. Can someone help me figure out what I am missing? FIDDLE CSS #main { margin: 0 auto; } #header { clear:both; float:left; ...

htmlcss

Tips for concealing a parent element while inside a span with jquery

Beginner asking for help! Take a look at what I've coded: <div class="Links"> <a href="/testthis1.html" data-id="button1"> <img class="icon" src="/test1.png" alt="test1"> <span>Test 1</span> < ...

jqueryhtmlhideparent

Darken the backdrop of the bootstrap modal

When the modal is opened, the background turns black instead of having an opacity of 0.5 or something similar. How can I resolve this issue? I am using Bootstrap 3.2. Below is some CSS code snippet: .fade.in { opacity: 1; } .modal-open .modal { overflow ...

htmlcsstwitter-bootstrap-3

When using jQuery's `.click()` method on an element to collapse it with the 'show' parameter set to false, the disabling action will only take effect after the document

When you first run the program and click anywhere on the body, it activates the collapse element. I want it to only collapse the accordion on click, not show it immediately. Currently, it will deactivate only after it is hidden once. HTML <!DOCTYPE ht ...

javascriptjqueryhtmlcsstwitter-bootstrap

What is the best way to implement backup style attributes for a React JS component?

Is there a method to implement fallback style properties for a component? For example: var inlineStyle = { display: '-webkit-box', display: '-webkit-flex', display: '-moz-box', display: '-moz-flex', ...

javascriptcssreactjs

What are some ways to customize the player for Youtube videos?

I'm looking to recreate the design of Youtube videos on my website when I embed them. The image below is just an example, but it reflects the simplicity I am aiming for. Any guidance or examples would be greatly appreciated, as I am unsure where to be ...

phphtmlcssyoutube

What is causing my HTML wrapper to malfunction?

Below is the HTML code for my website: <div id="wrapper"> <div id="header"> <img src="images/MyBannerFinished.jpg" alt="Header" width="803" class="headerimage" /> </div> <!--- End Header ---> <div id="navbar"> <ul ...

htmlcsstagswrapper

Utilize Bootstrap's toggle button in the navigation bar to smoothly shift the content to the left

Recently, I encountered an issue with the navbar on my website. In the mobile version, whenever the toggle button in the navbar is clicked, it results in the website shifting to the left and causing the content to be off-center. However, when I view the w ...

cssbootstrap-5

Guide on creating an HTML5 rectangle for reuse using the Prototypal Pattern

I'm struggling to grasp Prototypal Inheritance through the use of the Prototypal pattern by creating a rectangle object and an instance of that rectangle. It seems like it should be straightforward, but I'm having trouble understanding why the Re ...

javascripthtml

Obtaining the contents of a local directory with JavaScript

Currently, I am attempting to access the contents of a local folder using JavaScript. Despite my efforts with the Filesystem API, an error is consistently appearing: DOMException: It was determined that certain files are unsafe for access within a Web app ...

javascripthtmlangularjsimagefile

What is the process for including a JavaScript file in an HTML document?

Greetings to all and thank you for taking the time! I have a straightforward query for you.. I have designed an html page featuring only a basemap (open street map). Moreover, I possess a javascript file which utilizes your coordinates to calculate a perce ...

javascripthtmlfunctionpopupjsfiddle

What is the reason for background images not loading when using `display: none`?

I'm really struggling to understand this puzzle: When the page loads, will mypic.jpg be downloaded by the browser? #test1 { display: none; } #test2 { background-image: url('http://www.dumpaday.com/wp-content/uploads/2017/01/random-pic ...

htmlcss

Execute jQuery after Angular has completed its loading process

I'm currently working on making some small adjustments to an existing website. This website was originally created using Angular. While my code is written with jQuery, I do have the flexibility to use any type of JavaScript necessary. Despite this, ...

javascriptjqueryhtmlangularjs

Looking to add elements to a specific div dynamically using jQuery? Let's explore how to insert comments seamlessly

I would like to implement a comment system that adds entered comments to a specific div. Here's the code I have so far: <ul class="comments"> <li> <a class="commenter_name" href="/">Dushyanth Lion</a> ...

javascriptjqueryhtmlcss

The Flask server push appears to be functioning correctly, yet the EventSource.onmessage event is not triggering as expected

My implementation includes a route /stream that is designed to push the string 'test' every second. Upon accessing this URL (localhost:12346/stream) on Chrome, I observed that it opens a blank page and adds "test" to the page every second. This ...

javascripthtmlflaskserver-sent-eventseventsource

What is the best way to upload multiple files in Laravel using Guzzle?

Currently, I am facing an issue while trying to upload files to an external server using JWT for authentication. Here is a snippet of my form: <form action="{{ route('operations.photos-for-families.upload', [$operation, $current->index ...

phphtmllaravelguzzle