This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 5 years ago.
This is a very simple example. It displays a gap between all 4 images. Doesn't matter if they are in the same div or not.
<div>
<img src="http://lorempixel.com/400/200">
<img src="http://lorempixel.com/400/200">
</div>
<div>
<img src="http://lorempixel.com/400/200">
<img src="http://lorempixel.com/400/200">
</div>
div {
margin: 0;
padding: 0;
}
img {
margin: 0;
padding: 0;
}
<div>
<img src="http://lorempixel.com/400/200">
<img src="http://lorempixel.com/400/200">
</div>
<div>
<img src="http://lorempixel.com/400/200">
<img src="http://lorempixel.com/400/200">
</div>
Codepen
Where are these gaps coming from and how do I get rid of them?
I have tested in Chrome, Opera, Firefox and Safari.
The reason is the inline-elements (<img>). You can do multiple things. One would be to set font-size on the image container to 0.
div.img {
clear:both;
font-size:0;
}
div.img img {
display:inline;
float:left;
}
<div class="img">
<img src="https://lorempixel.com/400/200">
<img src="https://lorempixel.com/400/200">
</div>
<div class="img">
<img src="https://lorempixel.com/400/200">
<img src="https://lorempixel.com/400/200">
</div>
Another solution using flexbox (more recommended):
div.img {
display:flex;
flex-direction:row;
align-items:start;
}
<div class="img">
<img src="https://lorempixel.com/400/200">
<img src="https://lorempixel.com/400/200">
</div>
<div class="img">
<img src="https://lorempixel.com/400/200">
<img src="https://lorempixel.com/400/200">
</div>
And one more solution with CSS grid:
div.img {
display:grid;
grid-template-columns:auto auto;
}
<div class="img">
<img src="https://lorempixel.com/400/200">
<img src="https://lorempixel.com/400/200">
</div>
<div class="img">
<img src="https://lorempixel.com/400/200">
<img src="https://lorempixel.com/400/200">
</div>
Simply use display: flex for this to the parent div like below
div {
display: flex;
}
<div>
<img src="http://lorempixel.com/400/200">
<img src="http://lorempixel.com/400/200">
</div>
<div>
<img src="http://lorempixel.com/400/200">
<img src="http://lorempixel.com/400/200">
</div>
Updated
Just put float: left to the <img> and the problem is solved
The img is a block element that's why the gap between them if use float to the img then it will solve your issue.
To break the images as per the image just add clear: both; to the
div {
margin: 0;
padding: 0;
clear: both;
}
img {
margin: 0;
padding: 0;
float:left;
}
<div>
<img src="http://lorempixel.com/400/200">
<img src="http://lorempixel.com/400/200">
</div>
<div>
<img src="http://lorempixel.com/400/200">
<img src="http://lorempixel.com/400/200">
</div>
Codepen
Hope this is helpful.
make use of "style=float:left" and style="line-height:0px;" will resolve issue . try below it resolve issue of bottom an side space too
<div style="line-height:0px;">
<img src="http://lorempixel.com/400/200" style="float:left;">
<img src="http://lorempixel.com/400/200">
</div>
<div >
<img src="http://lorempixel.com/400/200" style="float:left;">
<img src="http://lorempixel.com/400/200">
</div>
Related
How to remove this space among the pictures?
I'm to learning to create a gallery, but I can't remove the space among the pictures, what should I do?
The code:
body {
background: #E6E6E6;
}
<body class="imagens">
<img src="imagens/imagem1.png">
<img src="imagens/imagem2.png">
<img src="imagens/imagem3.png">
<img src="imagens/imagem4.png">
<img src="imagens/imagem5.png">
</body>
The space between the images is due to the whitespace between the <img> elements in your source code. By default, <img> elements have their CSS display property set to inline, meaning they act as emojis would in regular text (if you leave space between them, they will have space between them; if you don't leave space between them, they won't have any space between them).
So the HTML-based approach to solving this issue is to remove all whitespace characters between the elements:
<body class="imagens">
<img src="http://via.placeholder.com/350x150"><img src="http://via.placeholder.com/350x150"><img src="http://via.placeholder.com/350x150"><img src="http://via.placeholder.com/350x150"><img src="http://via.placeholder.com/350x150">
</body>
A CSS-based approach might be to apply something along these lines:
.imagens {
overflow: hidden;
}
.imagens img {
float: left;
}
You can use float.
.clearfix::after, .container::after {
content: " "; /* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
.images img {
float: left;
}
<div class="images clearfix">
<img src="http://via.placeholder.com/150x150">
<img src="http://via.placeholder.com/150x150">
<img src="http://via.placeholder.com/150x150">
<img src="http://via.placeholder.com/150x150">
<img src="http://via.placeholder.com/150x150">
<img src="http://via.placeholder.com/150x150">
<img src="http://via.placeholder.com/150x150">
<img src="http://via.placeholder.com/150x150">
</div>
You can use float: left and make them display: block. No need for anything else...
img {
display: block;
float: left;
}
<div>
<img src="http://placehold.it/120x120">
<img src="http://placehold.it/120x120">
<img src="http://placehold.it/120x120">
<img src="http://placehold.it/120x120">
<img src="http://placehold.it/120x120">
</div>
You can use a small hack using HTML comments as spacers between the elements:
<img src="imagens/imagem1.png"><!--
--><img src="imagens/imagem2.png"><!--
--><img src="imagens/imagem3.png"><!--
--><img src="imagens/imagem4.png"><!--
--><img src="imagens/imagem5.png">
The simplest fix will be to set the below CSS property
Although I recommend not using this fix in the body element
.container{
background: #E6E6E6;
font-size:0px;
}
Cause of the problem: Source: here
because white space is significant for inline elements. You can always
float your images if you want to have them line up.
Since there is an enter between the images, we get this problem!
.container {
background: #E6E6E6;
font-size: 0px;
}
<body class="imagens">
<div class="container">
<img src="http://via.placeholder.com/350x150">
<img src="http://via.placeholder.com/350x150">
<img src="http://via.placeholder.com/350x150">
<img src="http://via.placeholder.com/350x150">
<img src="http://via.placeholder.com/350x150">
</div>
</body>
What I want to do is have the images on this site change in width and height (they should be equal) between 50-60px. However between them they all need to have a minimum padding of 5px. This can vary depending on the size of the images, this is the case as the two end images need to fit to the edges of the parent div, to align with an image about it. The height/width/padding should all change to ensure the images are still properly aligned when then screen size changes.
If you look at this page you will be able to see what I mean. The images that need to change are the grey squares at the bottom.
http://media.gaigo.org/work2.html
This is my html:
<div class="smallImages">
<div><img src="static/img/smallImage.png"></div>
<div><img src="static/img/smallImage.png"></div>
<div><img src="static/img/smallImage.png"></div>
<div><img src="static/img/smallImage.png"></div>
</div>
and my css is as follows:
smallImages div {
display: inline-block;
padding: 5px;
}
.smallImages div img {
max-width: 60px;
min-width: 50px;
max-height: 60px;
min-height: 50px;
}
Sorry if this seems confusing. Just ask if you need me to explain more.
One option is to set percentage widths, however that number percentage is dependent upon the number of images in your row. See this example:
* {
box-sizing:border-box; /* You need this so that heights and widths are inclusive of padding and border */
}
.container {
width:400px; /* set this to whatever you like, it should work still */
padding:5px;
border:1px solid;
}
.row {
width:100%;
padding:0 5px;
}
.row img {
padding:5px;
}
.row.one img {
width:100%;
}
.row.two img {
width:50%;
}
.row.three img {
width:33.33%;
}
.row.four img {
width:25%;
}
<div class="container">
<div class="row one">
<img src="http://placehold.it/150x150">
</div>
<div class="row two">
<img src="http://placehold.it/150x150"><!--
--><img src="http://placehold.it/150x150">
</div>
<div class="row three">
<img src="http://placehold.it/150x150"><!--
--><img src="http://placehold.it/150x150"><!--
--><img src="http://placehold.it/150x150">
</div>
<div class="row four">
<img src="http://placehold.it/150x150"><!--
--><img src="http://placehold.it/150x150"><!--
--><img src="http://placehold.it/150x150"><!--
--><img src="http://placehold.it/150x150">
</div>
</div>
Putting HTML comments between lines means there's no white space between the images.
This is what you are after.
Display inline-block wont let the images behave in that manner you need to use table.
You should just check the source code of the site you are working from..
.row {
display: table-row;
}
.smallImages {
padding-left: 0px;
margin-bottom: 0px;
display: table;
text-align: center;
}
.smallImages .row div {
display: table-cell;
padding: 5px;
}
.smallImages .row div:first-child {
padding-left: 0;
}
.smallImages .row div img {
max-width: 100%;
}
img {
border: 0;
}
<div class="smallImages">
<div class="row">
<div>
<a href="#item-1">
<img src="http://media.gaigo.org/static/img/smallImage.png">
</a>
</div>
<div>
<a href="#item-2">
<img src="http://media.gaigo.org/static/img/smallImage.png">
</a>
</div>
<div>
<a href="#item-3">
<img src="http://media.gaigo.org/static/img/smallImage.png">
</a>
</div>
<div>
<a href="#item-4">
<img src="http://media.gaigo.org/static/img/smallImage.png">
</a>
</div>
<div>
<a href="#item-5">
<img src="http://media.gaigo.org/static/img/smallImage.png">
</a>
</div>
<div>
<a href="#item-6">
<img src="http://media.gaigo.org/static/img/smallImage.png">
</a>
</div>
<div>
<a href="#item-7">
<img src="http://media.gaigo.org/static/img/smallImage.png">
</a>
</div>
<div>
<a href="#item-8">
<img src="http://media.gaigo.org/static/img/smallImage.png">
</a>
</div>
<div>
<a href="#item-9">
<img src="http://media.gaigo.org/static/img/smallImage.png">
</a>
</div>
<div>
<a href="#item-10">
<img src="http://media.gaigo.org/static/img/smallImage.png">
</a>
</div>
<div>
<a href="#item-11">
<img src="http://media.gaigo.org/static/img/smallImage.png">
</a>
</div>
<div>
<a href="#item-12">
<img src="http://media.gaigo.org/static/img/smallImage.png">
</a>
</div>
</div>
</div>
I read many article about vertical alignment but how can I align 3 images horizontally from middle?
<div class="notification-from-picture"> <img src="images/1.jpg" class="img-circle" /> </div>
<div class="notification-between-from-to"> <img src="images/2.jpg"/> <div>
<div class="notification-to-picture"> <img src="images/3.jpg" class="img-circle"/>< /div>
just do this it will work:
.notification-from-picture,
.notification-between-from-to,
.notification-to-picture
{
display: inline;
}
.notification-from-picture,
.notification-between-from-to,
.notification-to-picture {
display: inline-block;
}
and then put a wrapper div around the divs like so
<div id="image-wrapper">
<div class="notification-from-picture"> <img src="images/1.jpg" class="img-circle" /> </div>
<div class="notification-between-from-to"> <img src="images/2.jpg"/> <div>
<div class="notification-to-picture"> <img src="images/3.jpg" class="img-circle"/>< /div>
</div>
and then do
#image-wrapper {
text-align: center;
}
I've been trying to center the images within a div on my page.
Relevant HTML:
<div class="imgblock">
<div class="basket slide1"><a href="#">
<div class="images">
<div class="img-wrap"><img src="images/basket.jpg" alt="" align="center"/ </div>
<div class="infos"></div>
</div>
</a></div>
<div class="steak slide2"><a href="#">
<div class="images">
<div class="img-wrap"><img src="images/steak.jpg" alt="" /></div>
<div class="infos"></div>
</div>
</a></div>
<div class="col1-4 slide3"><a href="#">
<div class="images">
<div class="img-wrap"><img src="images/breakfast.jpg" alt="" /></div>
<div class="infos"></div>
</div>
</a></div>
<div class="fish slide4"><a href="#">
<div class="images">
<div class="img-wrap"><img src="images/fish.jpg" alt="" /></div>
<div class="infos"></div>
</div>
</a></div>
</div>
Relevant CSS:
.imgblock {
width:940px;
text-align:center;
vertical-align:middle;
margin:0 10px;
}
In my research I was told to add text-align:center and vertical-align:middle. This didn't work, I also tried margin-left:auto and margin-right:auto.
Thanks for your help.
since your image are floatting, you can only reduce width of .imgblock and use auto margin :
.imgblock {
width:830px;
margin:0 auto;;
}
As #mdesdev has said, the recommended way to center block items is through:
margin: 0 auto;
That goes for your images as well. I would do something like this (untested):
.imgblock img{
display: block;
margin: 0 auto;
}
You could probably do without some of the surrounding div's as well.
you can try
.basket {
margin: 0 10px 0 320px;
width: 300px;
}
HTML
<div class="image1">
<img src="images/img1.png" width="250" height="444" alt="Screen 1"/>
<img src="images/img2.png" width="250" height="444" alt="Screen 2"/>
<img src="../images/img3.png" width="250" height="444" alt="Screen 3"/>
</div>
If I add a paragraph text between img1 and img2 they get separated (img2 goes to a newline)
What I'm attempting to do is this (with some space between the images):
[image1] [image2] [image3]
[text] [text] [text]
I haven't given the images their own individual class names because the images don't align horizontally to one another.
Add a container div for the image and the caption:
<div class="item">
<img src=""/>
<span class="caption">Text below the image</span>
</div>
Then, with a bit of CSS, you can make an automatically wrapping image gallery:
div.item {
vertical-align: top;
display: inline-block;
text-align: center;
width: 120px;
}
img {
width: 100px;
height: 100px;
background-color: grey;
}
.caption {
display: block;
}
div.item {
/* To correctly align image, regardless of content height: */
vertical-align: top;
display: inline-block;
/* To horizontally center images and caption */
text-align: center;
/* The width of the container also implies margin around the images. */
width: 120px;
}
img {
width: 100px;
height: 100px;
background-color: grey;
}
.caption {
/* Make the caption a block so it occupies its own line. */
display: block;
}
<div class="item">
<img src=""/>
<span class="caption">Text below the image</span>
</div>
<div class="item">
<img src=""/>
<span class="caption">Text below the image</span>
</div>
<div class="item">
<img src=""/>
<span class="caption">An even longer text below the image which should take up multiple lines.</span>
</div>
<div class="item">
<img src=""/>
<span class="caption">Text below the image</span>
</div>
<div class="item">
<img src=""/>
<span class="caption">Text below the image</span>
</div>
<div class="item">
<img src=""/>
<span class="caption">An even longer text below the image which should take up multiple lines.</span>
</div>
http://jsfiddle.net/ZhLk4/1/
Updated answer
Instead of using 'anonymous' div and spans, you can also use the HTML5 figure and figcaption elements. The advantage is that these tags add to the semantic structure of the document. Visually there is no difference, but it may (positively) affect the usability and indexability of your pages.
The tags are different, but the structure of the code is exactly the same, as you can see in this updated snippet and fiddle:
<figure class="item">
<img src=""/>
<figcaption class="caption">Text below the image</figcaption>
</figure>
figure.item {
/* To correctly align image, regardless of content height: */
vertical-align: top;
display: inline-block;
/* To horizontally center images and caption */
text-align: center;
/* The width of the container also implies margin around the images. */
width: 120px;
}
img {
width: 100px;
height: 100px;
background-color: grey;
}
.caption {
/* Make the caption a block so it occupies its own line. */
display: block;
}
<figure class="item">
<img src=""/>
<figcaption class="caption">Text below the image</figcaption>
</figure>
<figure class="item">
<img src=""/>
<figcaption class="caption">Text below the image</figcaption>
</figure>
<figure class="item">
<img src=""/>
<figcaption class="caption">An even longer text below the image which should take up multiple lines.</figcaption>
</figure>
<figure class="item">
<img src=""/>
<figcaption class="caption">Text below the image</figcaption>
</figure>
<figure class="item">
<img src=""/>
<figcaption class="caption">Text below the image</figcaption>
</figure>
<figure class="item">
<img src=""/>
<figcaption class="caption">An even longer text below the image which should take up multiple lines.</figcaption>
</figure>
http://jsfiddle.net/ZhLk4/379/
Best way is to wrap the Image and Paragraph text with a DIV and assign a class.
Example:
<div class="image1">
<div class="imgWrapper">
<img src="images/img1.png" width="250" height="444" alt="Screen 1"/>
<p>It's my first Image</p>
</div>
...
...
...
...
</div>
Since the default for block elements is to order one on top of the other you should also be able to do this:
<div>
<img src="path/to/img">
<div>Text Under Image</div>
</div
img {
display: block;
}
I created a jsfiddle for you here: JSFiddle HTML & CSS Example
CSS
div.raspberry {
float: left;
margin: 2px;
}
div p {
text-align: center;
}
HTML (apply CSS above to get what you need)
<div>
<div class = "raspberry">
<img src="http://31.media.tumblr.com/tumblr_lwlpl7ZE4z1r8f9ino1_500.jpg" width="100" height="100" alt="Screen 2"/>
<p>Raspberry <br> For You!</p>
</div>
<div class = "raspberry">
<img src="http://31.media.tumblr.com/tumblr_lwlpl7ZE4z1r8f9ino1_500.jpg" width="100" height="100" alt="Screen 3"/>
<p>Raspberry <br> For You!</p>
</div>
<div class = "raspberry">
<img src="http://31.media.tumblr.com/tumblr_lwlpl7ZE4z1r8f9ino1_500.jpg" width="100" height="100" alt="Screen 3"/>
<p>Raspberry <br> For You!</p>
</div>
</div>
You can use the HTML5 Caption feature.
Easiest way excpecially if you don't know images widths is to put the caption in it's own div element an define it to be cleared:both !
...
<div class="pics">
<img class="marq" src="pic_1.jpg" />
<div class="caption">My image 1</div>
</div>
<div class="pics">
<img class="marq" src="pic_2.jpg" />
<div class="caption">My image 2</div>
</div>
...
and in style-block define
div.caption: {
float: left;
clear: both;
}
Instead of images i choose background option:
HTML:
<div class="class1">
<p>Some paragraph, Some paragraph, Some paragraph, Some paragraph, Some paragraph,
</p>
</div>
<div class="class2">
<p>Some paragraph, Some paragraph, Some paragraph, Some paragraph, Some paragraph,
</p>
</div>
<div class="class3">
<p>Some paragraph, Some paragraph, Some paragraph, Some paragraph, Some paragraph,
</p>
</div>
CSS:
.class1 {
background: url("Some.png") no-repeat top center;
text-align: center;
}
.class2 {
background: url("Some2.png") no-repeat top center;
text-align: center;
}
.class3 {
background: url("Some3.png") no-repeat top center;
text-align: center;
}