CODEWITHSUNDEEP
csshtmlcss-floatmargins
Lars
Lars

Reputation: 25

Why is my margin bottom on my float not correct?

I have a content box in which I want a div box that floats to the left and paragraphs that flow around it. So far my HTML looks like this:

.content {
  float: left;
  padding: 20px;
  width: 650px;
  height: 500px;
  background-color: #F5CF8E;
  /* Yellowish */
}

.fake-image {
  float: left;
  width: 200px;
  height: 200px;
  border: 0.5px solid gray;
  padding: 20px;
  margin: 0 20px 20px 0;
}
<div class="content">
  <div class="fake-image"></div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam incidunt dolores atque ipsam expedita architecto, dignissimos error consectetur aperiam. At harum in optio voluptatibus ex beatae praesentium eius velit cum!</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam incidunt dolores atque ipsam expedita architecto, dignissimos error consectetur aperiam. At harum in optio voluptatibus ex beatae praesentium eius velit cum!</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam incidunt dolores atque ipsam expedita architecto, dignissimos error consectetur aperiam. At harum in optio voluptatibus ex beatae praesentium eius velit cum!</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam incidunt dolores atque ipsam expedita architecto, dignissimos error consectetur aperiam. At harum in optio voluptatibus ex beatae praesentium eius velit cum!</p>
</div>

What I really don't get is why is the margin-bottom: 20px; of my .fake-image not working? The margin is bigger. Can anyone help?

Here an image of what I mean:

enter image description here

Upvotes: 2

Views: 109

Answers (2)

Mark Witmer
Mark Witmer

Reputation: 128

This space is not extra margin. It's the remainder of the height of the wrapping line

enter image description here

In other words, the line that breaks under the image may not break perfectly to match the exact spot where your margin ends unless your lines perfectly divide that space somehow. It would be unreasonable to try to control this for most situations, however, hypothetically you could accomplish a fix if it were completely static content, but I don't recommend trying to do this because you might be fighting an uphill battle.

To test this for yourself: remove all margins except for your bottom margin on your image and manipulate line-height and typography stylings to see how they play together and/or manipulate only the bottom margin on that image and/or the image height.

Upvotes: 2

Mark Schultheiss
Mark Schultheiss

Reputation: 34168

Whenever I have an issue like this, I add specificity to the related CSS. margin in this case. margin: 0 20px 20px 0; shorthand for margin-top:0; margin-right: 20px; margin-bottom:20px; margin-left:0;

Fix the bottom by knowing also what is around it.

Here I add a div around it and set it's background so you see where the image actually IS. Other space belongs to other elements.

Now, we have the ugly lime and red we can see what is what, adjust that image and paragraphs etc., then we can later remove those ugly CSS things. 

.content {
  float: left;
  padding: 20px;
  width: 650px;
  height: 500px;
  background-color: #F5CF8E;
  /* Yellowish */
}

.fake-image {
  float: left;
  width: 200px;
  height: 200px;
  border: 0.5px solid gray;
  padding:20px;
 /* margin-top: 0;
  margin-left: 20px;
  margin-right: 20px;
  margin-bottom: 20px; */
  margin: 0 20px 20px 0; 
}
.outside-image{float: left;background-color:lime;}
p {border:1px solid red;}
<div class="content">
  <div class="outside-image"><div class="fake-image"></div></div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam incidunt dolores atque ipsam expedita architecto, dignissimos error consectetur aperiam. At harum in optio voluptatibus ex beatae praesentium eius velit cum!</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam incidunt dolores atque ipsam expedita architecto, dignissimos error consectetur aperiam. At harum in optio voluptatibus ex beatae praesentium eius velit cum!</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam incidunt dolores atque ipsam expedita architecto, dignissimos error consectetur aperiam. At harum in optio voluptatibus ex beatae praesentium eius velit cum!</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam incidunt dolores atque ipsam expedita architecto, dignissimos error consectetur aperiam. At harum in optio voluptatibus ex beatae praesentium eius velit cum!</p>
</div>

Upvotes: 1

Related Questions