Remove undesirable margin below image

Asked

Viewed 88 times

0

I’ve done this so far:

*{margin:0;padding:0;}

.container{
    width:700px;
}
.image img{
    margin-right:15px;
    float:left;
    width: 300px;
    height: 225px;
    object-fit: cover;
    position: relative;
    background:#333;
}

.container p{
    font-size:20px;
    width: 370px;
    text-align: justify;
    display: inline-block;
    vertical-align: top;
}

.comment-box{
    height:50px;
    width: 300px;
    line-height: 2.3em;
    font-weight: 700;
    background: #D8DFE3;
    text-align: center; 
}
<div class="container">
    <div class="image">
        <img src="">
    </div>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </p>
    <div class="comment-box">Comentários</div>
</div>

I’d like the element .comment-box is not separated from the picture, image of what I am trying to achieve:

inserir a descrição da imagem aqui

html css
  • 3

    Your fiddle is working.

  • I see no problem in the structure, but if you are starting in html and css I suggest you already take a look at css frameworks, a popular and very easy is the bootstrap, he helps you in these times, not to do everything by hand

  • But the comment box gets an unwanted margin.

  • 2

    Related http://answall.com/questions/91606/colocar-texto-imagesideText

  • Good morning to all, although Pedro’s question is poorly worded and does not explain the real problem (supposed margin below the image), I voted to leave it open as this question is not a duplicate of http://answall.com/q/91606/3635, however Pedro I suggest you explain the problem better next time, because your questions may be closed for other reasons.

2 answers

3


You can do as follows using CSS and HTML nesting:

Add the image and text "comment" inside the same container for example a <div> in HTML and then use float the same so that the text is on the side.

Example:

/* RESET */
* {
  margin: 0;
  padding: 0;
}


div {
  float: left;
}
h2 {
  background-color: #333;
  color: #fff;
  font-size: 14px;
  padding: 10px 0;
  margin-right: 10px;
  text-align: center;
  text-transform: uppercase;
  width: 150px;
}
img {
  background-color: gray;
  display: block;
  height: 100px;
  width: 150px;
}
<div>
  <img src="">
  <h2>Comentários</h2>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed erat at nisl vestibulum mattis egestas non sem. Vestibulum a neque posuere, porttitor justo ut, dignissim leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vel nisl at
  leo maximus iaculis vitae eu justo. Nam euismod, sapien ut gravida pulvinar, elit libero dignissim justo, et aliquam lacus magna vel metus. Vestibulum tristique dolor at lectus sodales, ut pulvinar ligula pulvinar.</p>

This way you don’t need to delimit heights and content can flow normally if your content is responsive.

I also recommend using a technique called clearfix to "clean up" the float.

OBS.: Similar question.

  • Exactly, the CSS does not do all the service, the correct is to even adjust the HTML. + 1 by the answer!

  • Thank you! You helped a lot

1

you can let the text height be the same as the image by adding height: 225px;

See working.

*{margin:0;padding:0;}
.container{
    width:700px;
}
.image img{
    margin-right:15px;
    float:left;
    width: 300px;
    height: 225px;
    object-fit: cover;
    position: relative;
    background:#333;
}
.container p{
    font-size:20px;
    width: 370px;
    text-align: justify;
    display: inline-block;
    vertical-align: top;
    height: 225px;
}

.comment-box{
    height:50px;
    width: 300px;
    line-height: 2.3em;
    font-weight: 700;
    background: #D8DFE3;
    text-align: center; 
}
<body>
<div class="container">
  <div class="image">
    <img src="">
  </div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<div class="comment-box">Comentários</div>
</div>

but of course it is not a 100% effective solution, can cause more problems in the future, even stability with only a css framework

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.