Remove unwanted margin below image

Question

Remove unwanted margin below image

Navigation

#1 by (3 votes)
#2 by (1 votes)

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 .comment-box element not to be separated from the picture, image of what I'm trying to achieve:

html css

asked by anonymous 23.10.2015 / 18:48

2 answers

1

You can leave the height of the text being the same as that of the image by adding height: 225px;

See it 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, it can cause more problems in the future, stability even with a css framework

23.10.2015 / 19:52

Replicate information through the columns of the JS Angular table Why function is returning undefined [closed]

score 3 · Accepted Answer

You can do as follows using CSS and HTML nesting:

Add the image and text "comment" within a same container for example a <div> in HTML and then use float in it so that the text stay 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 do not need to delimit heights and content can flow normally if your content is responsive.

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

NOTE: Similar question .