-1

I have two <div> sections, one with content on top and the other with image below. I want the <div> to seat on top of other that is I would like to erase the space between the two <div>s. How do I do it?

.boxed-green {
  margin-top: 1%;
  padding: 0 8px 0 8px;
  border: none;
  background: #5AAD97;
}

.boxed-green h3 {
  padding: 4% 6% 3% 6%;
  margin-top: 1%;
  font-family: "Verdana", "Times New Roman";
  font-weight: bold;
  font-size: 19px;
  color: black;
}

.boxed-green h4 {
  padding: 0% 6% 8% 6%;
  font-size: 14px;
  font-family: "Verdana", "Times New Roman";
  color: black;
}

img {
  margin: 0;
  padding: 0;
  display: block;
}
<div class="container">
  <div class="col-md-3">
    <div class="boxed-green">
      <p>
        <h3> Who We Are </h3>
      </p>
      <p>
        <h4>Test Test Test Test Test Test</h4>
      </p>
    </div>
    <div>
      <img src="images\vivid_studios\studio1_1.png" alt="Picture1">
    </div>
  </div>
</div>
Sebastian Simon
  • 18,263
  • 7
  • 55
  • 75
Reshma
  • 37
  • 2
  • 6

5 Answers5

0

Hope this helps: div{line-height:0;}

dnguyen
  • 149
  • 1
  • 2
  • 12
0

Update .boxed-green to following 

     .boxed-green {
  margin-top: 1%;
  padding: 0 8px 0 8px;
  border: none;
  background:#5AAD97;
  line-height:0;
}
jjj
  • 1,136
  • 3
  • 18
  • 28
0

Please check out the fiddle : https://jsfiddle.net/NayanaDas/jpewas4f/ . Add margin-bottom:0px; to class ".boxed-green h4", like following:

.boxed-green h4 {
  padding :0% 6% 8% 6%;
  font-size: 14px;
  font-family: "Verdana", "Times New Roman";
  color:black;
  margin-bottom:0px;
 }
Nayana_Das
  • 1,789
  • 4
  • 23
  • 48
  • Have u used the same html, in your code

    &

    tag comes inside

    tag, & when i run the html it shows error, so i put

    tag inside

    &

    . Then it worked. It will definitely work.

     – Nayana_Das Mar 16 '17 at 10:40
0

Provide margin: 0 to your p elements. By default p elements take native margin properties as defined by the browser.

And also, give margin-bottom: 0 to your .boxed-green h4.

Refer code:

.boxed-green {
  margin-top: 1%;
  padding: 0 8px 0 8px;
  border: none;
  background: #5AAD97;
}

.boxed-green h3 {
  padding: 4% 6% 3% 6%;
  margin-top: 1%;
  font-family: "Verdana", "Times New Roman";
  font-weight: bold;
  font-size: 19px;
  color: black;
}

.boxed-green h4 {
  padding: 0% 6% 8% 6%;
  font-size: 14px;
  font-family: "Verdana", "Times New Roman";
  color: black;
  margin-bottom: 0;
}

img {
  margin: 0;
  padding: 0;
  display: block;
}

p {
  margin: 0;
  padding: 0;
}
<div class="container">
  <div class="col-md-3">
    <div class="boxed-green">
      <p>
        <h3> Who We Are </h3>
      </p>
      <p>
        <h4>Test Test Test Test Test Test</h4>
      </p>
    </div>
    <div>
      <img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMTYxMjk0NDg4Ml5BMl5BanBnXkFtZTgwODcyNjA5OTE@._V1._SX600_SY600_.jpg" alt="Picture1">
    </div>
  </div>
</div>
nashcheez
  • 5,067
  • 1
  • 27
  • 53
  • Hi, Thanks for the quick reply but still its not working for me. I changed the image too to see if its working but its not. – Reshma Mar 16 '17 at 10:36
  • Check the code snipped I added here, and look at the result. It should work and is clearly working – nashcheez Mar 16 '17 at 10:38
  • You are supposed to upvote or mark the answer as correct if it did help you. Appreciate people's efforts here. ;) – nashcheez Mar 16 '17 at 11:03
0

H4 does have default margin applied by the browser, so you have to make it to 0.

There are few bugs in your code:

Don't use heading tag inside p tag as it will terminate p tag ( more info ).

Try using reset or normalise css. As this will not allow browsers to apply their default styles.

.col-md-3 > div{
line-height:0;
}
.boxed-green {
  margin-top: 1%;
  padding: 0 8px 0 8px;
  border: none;
  background:#5AAD97;
}

.boxed-green h3 {
  padding :4% 6% 3% 6%;
  margin-top: 1%;
  font-family: "Verdana", "Times New Roman";
  font-weight: bold;
  font-size: 19px;
  color:black;
}

.boxed-green h4 {
  padding :0% 6% 8% 6%;
  font-size: 14px;
  font-family: "Verdana", "Times New Roman";
  color:black;
  margin-bottom: 0;
 }

 img {
  margin:0;
  padding:0;
  display: block;
}
<div class="container">
 <div class="col-md-3">
 <div class="boxed-green">
  <h3> Who We Are </h3>
  <h4>Test Test Test Test Test Test</h4>
 </div>
 <div>
 <img src="images\vivid_studios\studio1_1.png" alt="Picture1">
 </div>
 </div>
</div>
Community
  • 1
  • 1
Afsar
  • 3,104
  • 2
  • 25
  • 35
  • Thanks Afsar for the info on p tags. I removed the

    tags and its working. Thank you very much.

     – Reshma Mar 16 '17 at 10:46