CODEWITHSUNDEEP
css
PJCHENder
PJCHENder

Reputation: 6010

Float image with text wrap alignment of image bottom

I am using float to make text wrapped image. However, there is an unexpected margin at the bottom of the floated images. Is there any solution to fix the situation?

enter image description here

p{
    font-size: 16px;
}
img{
    float: left;
    margin: 18px 18px 18px 0;
}
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur suscipit debitis labore illo quod aut itaque id laudantium. Amet, magnam aliquam recusandae fugit sint quidem eveniet tenetur quasi voluptatum? Debitis officia dolores exercitationem, consequuntur quia ipsum obcaecati praesentium! Sit totam ipsam culpa, ipsa odit officiis voluptates dolorem asperiores veritatis quibusdam, libero voluptas modi provident dignissimos necessitatibus eum quaerat temporibus reiciendis expedita aliquid recusandae fugit. Esse sunt, nulla sint exercitationem quae, ad magnam laudantium quibusdam voluptatibus quia, voluptas corporis! Ab ad amet at corrupti atque voluptatum omnis cumque iure consequatur quia quaerat nemo, impedit, provident distinctio blanditiis quo exercitationem dolorum eos!
    <img src="https://placeimg.com/420/320/any">
   Lorem, ipsum dolor sit amet consectetur adipisicing elit. Distinctio cupiditate iusto molestiae expedita nesciunt? Ducimus earum perspiciatis quam a incidunt nemo exercitationem id itaque reiciendis? Error tempore eligendi, voluptatem incidunt perspiciatis aspernatur, unde cupiditate in, enim ullam culpa? Et debitis ipsa nobis amet ea perspiciatis temporibus qui quos dolores totam, voluptatem impedit fugiat facere accusamus illo, voluptatibus inventore autem, libero provident enim eius. Expedita modi deleniti consequuntur deserunt quas praesentium incidunt doloremque quos voluptas accusamus nihil alias labore architecto cum, atque, dolores nisi dolorem perspiciatis quibusdam autem, neque magni quo! Maiores, nam, rerum ad ipsa libero consectetur quis reprehenderit facilis vel impedit optio rem cupiditate necessitatibus qui deserunt est repellendus molestiae nobis quisquam alias id! 
   </p>

Upvotes: 1

Views: 39

Answers (2)

Robert Juneau
Robert Juneau

Reputation: 662

Change you're margin to margin: 18px 18px 0px 0px;

It margins and paddings with 4 arguments go: top, right, bottom, left. so you were adding the 18px in the third argument

Upvotes: 1

B&#233;ranger
B&#233;ranger

Reputation: 673

The margin is in fact an additional line of text.

You should change the line-height to fit the wanted margin. Try :

p{
    line-height:18x;
    font-size: 16px;
}
img{
    float: left;
    margin: 18px 18px 18px 0;
}
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur suscipit debitis labore illo quod aut itaque id laudantium. Amet, magnam aliquam recusandae fugit sint quidem eveniet tenetur quasi voluptatum? Debitis officia dolores exercitationem, consequuntur quia ipsum obcaecati praesentium! Sit totam ipsam culpa, ipsa odit officiis voluptates dolorem asperiores veritatis quibusdam, libero voluptas modi provident dignissimos necessitatibus eum quaerat temporibus reiciendis expedita aliquid recusandae fugit. Esse sunt, nulla sint exercitationem quae, ad magnam laudantium quibusdam voluptatibus quia, voluptas corporis! Ab ad amet at corrupti atque voluptatum omnis cumque iure consequatur quia quaerat nemo, impedit, provident distinctio blanditiis quo exercitationem dolorum eos!
    <img src="https://placeimg.com/420/320/any">
   Lorem, ipsum dolor sit amet consectetur adipisicing elit. Distinctio cupiditate iusto molestiae expedita nesciunt? Ducimus earum perspiciatis quam a incidunt nemo exercitationem id itaque reiciendis? Error tempore eligendi, voluptatem incidunt perspiciatis aspernatur, unde cupiditate in, enim ullam culpa? Et debitis ipsa nobis amet ea perspiciatis temporibus qui quos dolores totam, voluptatem impedit fugiat facere accusamus illo, voluptatibus inventore autem, libero provident enim eius. Expedita modi deleniti consequuntur deserunt quas praesentium incidunt doloremque quos voluptas accusamus nihil alias labore architecto cum, atque, dolores nisi dolorem perspiciatis quibusdam autem, neque magni quo! Maiores, nam, rerum ad ipsa libero consectetur quis reprehenderit facilis vel impedit optio rem cupiditate necessitatibus qui deserunt est repellendus molestiae nobis quisquam alias id! 
   </p>

Upvotes: 0

Related Questions