0

I have two div elements and I want to remove the space between them, which is filled with the background color at the moment. This is what it looks like. I want to remove the space between the green section and where the background image ends for the first div element. Here is the HTML for the page:

<body style="background-color: #c5ffff">
    <div class="main-search hero-image">
        <a href="{{ url_for('logout') }}" class="logout-button">Log Out</a>
        <div class="welcome-text">
            <div class="title">Welcome to Ripple.</div>
            <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquam commodi doloremque esse itaque iusto, labore laborum maxime odio, quidem quos, repellat rerum? Ab, asperiores aspernatur assumenda atque distinctio dolor dolore eveniet facilis, id illo ipsa ipsam minus nemo nobis porro quam quia quibusdam quis ratione rerum soluta suscipit temporibus vel vitae voluptate. Accusamus dignissimos ea esse expedita itaque mollitia nobis, numquam odio, quaerat qui vel voluptatibus?</div>
                <a href="{{ url_for('search_location') }}"><button class="search_button" >Search for a location</button></a>
                <button class="search_button">Search for a song</button>
            </div>
        </div>
        <div class="main-left">
            <div class="title">Collections Near Me</div>
        <div>
     </div>
</body>

And the CSS:

.main-left {
    vertical-align: top;
    margin-top: 0;
    margin-left: 0;
    position: relative;
    background-color: #85dcba;
    text-align: left;
    width: 100%;
    float: top;
    left: 50%;
    transform: translate(-50%);
}

.main-search {
    vertical-align: top;
    background-color: #d2fdff;
    text-align: left;
    margin: 0;
    padding-top: 2em;
    position: relative;
    top: 0;
    width: 100%;
    left: 50%;
    transform: translate(-50%);
}

.hero-image {
    background-image: url("main_background.jpg");
    background-size: cover;
    background-repeat: no-repeat;
}

.title {
    color: black;
    font-family: Roboto, sans-serif;
    font-size: 3em;
    margin-top: 0.5em;
    margin-left: 10px;
    margin-bottom: 0.5em;
}

.content {
    color: black;
    font-family: Roboto, sans-serif;
    font-size: 1em;
    margin: 1em;
}

.welcome-text {
    top: 5%;
    left: 5%;
    max-width: 35%;
}
Jems
  • 1,666
  • 4
  • 20
  • 50
jku
  • 15
  • 3

5 Answers5

0

You could try setting the margin values of the elements manually. I see you've set the padding- Which refers to the internal distance of contents to edge, but not the margin- which refers to the distance between seperate elements.

Also, nice looking design so far!

Milo Todt
  • 44
  • 2
0

Display flex has a nifty way of removing undesirable whitespace from the html

So place flex on the wrapper of these elements, in this case the body tag

css

body {
   display: flex;
   flex-direction: column;
}
Carol McKay
  • 2,438
  • 1
  • 15
  • 15
0

There is a gap because div is block element, if you want to remove the gap between div use display: inline-block to remove it.

body > div { display: inline-block; }

This will display an element as an inline-level block container. Please refer to CSS Display

Jems
  • 1,666
  • 4
  • 20
  • 50
0

Set margin-top of the .title to zero and for space between the .main-search and .title, give padding-bottom to .main-search as well. Below is how it will look like:

body{
   background-color: #c5ffff;
}

.main-left{
vertical-align: top;
margin-top: 0;
margin-left: 0;
position: relative;
background-color: #85dcba;
text-align: left;
width: 100%;
float: top;
left: 50%;
transform: translate(-50%);
}

.main-search{
vertical-align: top;
background-color: #d2fdff;
text-align: left;
margin: 0;
padding: 2em 0;
position: relative;
top: 0;
width: 100%;
left: 50%;
transform: translate(-50%);
}

.hero-image{
background-image: url("https://picsum.photos/500/500");
background-size: cover;
background-repeat: no-repeat;
}

.title{
color: black;
font-family: Roboto, sans-serif;
font-size: 3em;
margin-top: 0;
margin-left: 10px;
margin-bottom: 0.5em;
}

.content{
color: black;
font-family: Roboto, sans-serif;
font-size: 1em;
margin: 1em;
}

.welcome-text{
top: 5%;
left: 5%;
max-width: 35%;
}
<div class="main-search hero-image">
        <a href="{{ url_for('logout') }}" class="logout-button">Log Out</a>
        <div class="welcome-text">
            <div class="title">Welcome to Ripple.</div>
            <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquam commodi doloremque esse itaque iusto, labore laborum maxime odio, quidem quos, repellat rerum? Ab, asperiores aspernatur assumenda atque distinctio dolor dolore eveniet facilis, id illo ipsa ipsam minus nemo nobis porro quam quia quibusdam quis ratione rerum soluta suscipit temporibus vel vitae voluptate. Accusamus dignissimos ea esse expedita itaque mollitia nobis, numquam odio, quaerat qui vel voluptatibus?</div>
            <a href="{{ url_for('search_location') }}"><button class="search_button" >Search for a location</button></a>
            <button class="search_button">Search for a song</button>
        </div>
    </div>
    <div class="main-left">
        <div class="title">Collections Near Me</div>
    <div>
elahe karami
  • 641
  • 5
  • 11
0

remove margin-top:0.5em; on your title class.

.title {
color: black;
font-family: Roboto, sans-serif;
font-size: 3em;
 margin-top: 0.5em;  <-- REMOVE
margin-left: 10px;
margin-bottom: 0.5em;
Clauser
  • 11
  • 1