Pictures and inline elements side by side:
And inline elements appear side by side with the text when the picture will stagger certain position, which is caused by the default browser settings alignment
The default is the baseline alignment, just add to the picture attribute vertical- align: middle can be solved
Multiple images side by side - left and right margins:
There is a gap between multiple images.
<img src="blog.jpg">
<img src="blog.jpg">
<img src="blog.jpg">
Sometimes I do not want this gap exists.
Four methods:
1, more tags on one line.
<img src="blog.jpg"><img src="blog.jpg">
<img src="blog.jpg">
The place where the label to be closed with the start tag coincides method using sensory comments end to end with such a method is a method
2, on the parent tag write img: font-size: 0;
<div style="font-size:0">
<img src="blog.jpg">
<img src="blog.jpg">
<img src="blog.jpg">
</div>
3, using the display: block (img inline element)
<img src="blog.jpg" style="display:block">
<img src="blog.jpg" style="display:block">
<img src="blog.jpg" style="display:block">
4, using the letter-spacing attribute
<div style = "letter-spacing : -1000px">
value // letter-spacing, whether negative number will not overlap
<img src = "/ i / eg_tulip.jpg" alt = " tulip" height = "100px "/>
<IMG the src =" / I / eg_tulip.jpg "Alt =" tulip "height =" 100px "/>
</ div>
Disclaimer: This article is the original article CSDN bloggers' 1091214370's blog ", and follow CC 4.0 BY-SA copyright agreement, reproduced, please attach the original source link and this statement.
Original link: https://blog.csdn.net/qq_34149935/article/details/75137939