Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS Space between two <div> elements

Johna

Johna

Frontend Developer
Staff Team
Guardian
So I have a friend who is learning web development and he coded this. There is a gap in between the 2 <div> elements which he doesn't want there. The only way I can think of removing that gap is by adding margin-top: -19px; to the div with the info id, but that doesn't really seem like the best way to do it. Is there any better way to do it?

HTML: 
<html>
    <head>
        <title> Document</title>
        <style>
            .menu-items{
                padding: 12px 16px;
                text-decoration-color: black;
                font-size: 22px;
            }
            .list{
                font-size: 18px
            }
            .image{
                width:400px;
                height:300px;
            }
            .section{
            width:100%;
            height: 665px
            top:0px ;
            }
            #info{
                background-color: lightblue;
                top:0px;
                height: 100%;
            }
        </style>
    </head>
    <body style="margin: 0px">
        <div style="background-color:rgb(111, 153, 179); padding: 24px;">
        <span class="menu-items"><b> Index </b></span>
        <span class="menu-items"><b> Food </b></span>
        <span class="menu-items"><b> About</b></span>
        </div>
        <div id="info" class="section">
        <h3 style="padding-left:16px;"><b> Top 5 Favorite Foods:</b></h3>
        <ol style="list-style-type:disc">
            <li  class="list"><a href="/14. Doucment.html"> Biryani </a></li>
            <li class="list"> Pizza </li>
            <li class="list"> Lasagna </li>
            <li class="list"> Burger </li>
            <li class="list"> Caesad Salad </li>
        </ol>
        <p style="text-align:center">
        <img src="https://latestduniya.com/wp-content/uploads/2019/01/PicsArt_01-21-02.08.09-696x522.jpg"
        class="image" alt="Biryani">
        </p>
        </div>
    </body>
</html>
 
Solution
BGB
Add display: inline-block in your info id -
CSS: 
#info{
    background-color: lightblue;
    top:0px;
    height: 100%;
    display: inline-block;
}
Sort by date Sort by votes
try this:

HTML: 
<html>
    <head>
        <title> Document</title>
        <style>
            .menu-items{
                padding: 12px 16px;
                text-decoration-color: black;
                font-size: 22px;
            }
            .list{
                font-size: 18px
            }
            .image{
                width:400px;
                height:300px;
            }
            .section{
            width:100%;
            height: 665px
            top:0px ;
            }
            #info{
                background-color: lightblue;
                top:0px;
                height: 100%;
            }
        </style>
    </head>
    <body style="margin: 0px">
        <div style="background-color:rgb(111, 153, 179); padding: 24px;">
        <span class="menu-items"><b> Index </b></span>
        <span class="menu-items"><b> Food </b></span>
        <span class="menu-items"><b> About</b></span>
        </div><div id="info" class="section">
        <h3 style="padding-left:16px;"><b> Top 5 Favorite Foods:</b></h3>
        <ol style="list-style-type:disc">
            <li  class="list"><a href="/14. Doucment.html"> Biryani </a></li>
            <li class="list"> Pizza </li>
            <li class="list"> Lasagna </li>
            <li class="list"> Burger </li>
            <li class="list"> Caesad Salad </li>
        </ol>
        <p style="text-align:center">
        <img src="https://latestduniya.com/wp-content/uploads/2019/01/PicsArt_01-21-02.08.09-696x522.jpg"
        class="image" alt="Biryani">
        </p>
        </div>
    </body>
</html>
 
Upvote 0 Downvote
Add display: inline-block in your info id -
CSS: 
#info{
    background-color: lightblue;
    top:0px;
    height: 100%;
    display: inline-block;
}
 
Upvote 0 Downvote
Solution
Your #info selector doesn't have a display property in use for the top: 0px; that you have there. The code doesn't know what to do with top: 0px; with out having display: absolute; or display: relative;. You should be looking at padding or margin.
Also keep in mind the box model! Padding changes the space between content and border, margin changes space between border and other content/edge of screen.

I would start though by addressing the #info selector as the top declaration has no purpose.
 
Upvote 0 Downvote

New Threads

Latest posts

Share this page

Buy us a coffee!

Code Academy Advertisement
DataCamp Advertisement

About Us

Code Forum is a community platform where coding enthusiasts can connect with other developers, engage in discussions, ask for help, and share their knowledge with a supportive community. It's a perfect place to improve your coding skills and to find a community of like-minded individuals who share your passion for coding.

Site links

Stay Connected

Back
Top Bottom