There is a space between the first and second images.
How to remove the space while changing line in HTML?
<div>
<img src='http://lorempixel.com/100/100/abstract/1' />
<img src='http://lorempixel.com/100/100/abstract/2' /><img src='http://lorempixel.com/100/100/abstract/3' />
</div>
You have to modify the margin of your image :
img {
margin-left: -4px;
}
Good luck :)
using css
<style>
div img {
margin: 0;
padding: 0;
}
</style>
Try using css float property
img {
float: left;
}
you can use float:left to avoid the unwanted space or just place the html tags without space like <img src="" /><img src="" /><img src="" />
Html
<div class="divClass">
<img src="">
<img src="" /><img src="" />
</div>
CSS
.divClass img{
float:left;
}
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>
I want the first image to stick to the top of the container and the following images should be below it... top:0; lets the image be..200px above the container and if I just say position:relative its always in the middle...;
<div class="container">
<div class="card_left">
<p style="font-size:1.6em; padding: 15px 0;"><b>Title</b></p>
<p style="font-size:1.2em;">Long text</p>
</div>
<div class="card_right">
<img src="../res/images/artikel1bild.PNG"/>
<img src="../res/images/artikel1bild.PNG"/>
</div>
Use display: block so there will be no other images in the same line and margin: auto for centering the image
img {
display: block;
margin: auto;
width: 200px;
}
<div>
<img src="https://www.w3schools.com/css/paris.jpg" />
<img src="https://www.w3schools.com/css/paris.jpg" />
<img src="https://www.w3schools.com/css/paris.jpg" />
</div>
Just add <br /> after each image if you want to stick to HTML:
<div class="card_right">
<img src="../res/images/artikel1bild.PNG"/><br />
<img src="../res/images/artikel1bild.PNG"/><br />
</div>
Or the better way would be to make a separate CSS file and set display: block; for your img tags:
img {
display: block;
}
Example: https://jsfiddle.net/nk8fbr76/
try this
img {
margin: 0, auto;width: 200px;display:inline-block;height:100px;
}
<div class="card_right">
<img src="https://www.w3schools.com/css/img_fjords.jpg"/>
<img src="https://www.w3schools.com/css/img_fjords.jpg"/>
</div>
I want a div to contain several images in a single scrollable row. The following code works if i replace the images with a long string, but doesn't work with images.
<html>
<div style="overflow: auto">
<img src="a.jpg">
<img src="b.jpg">
<img src="c.jpg">
<img src="d.jpg">
</div>
</html>
It will work. Maybe white-space property is what you're looking for though? See below:
div {
width: auto;
overflow-x: auto;
white-space: nowrap;
}
<div>
<img src="https://placehold.it/400x200">
<img src="https://placehold.it/400x200">
<img src="https://placehold.it/400x200">
<img src="https://placehold.it/400x200">
<img src="https://placehold.it/400x200">
<img src="https://placehold.it/400x200">
<img src="https://placehold.it/400x200">
</div>
Please set height and width of the div so it will work see the below example
<style>
.auto-div {
background-color: #00FFFF;
width: 400px;
height: 300px;
overflow: auto;
}
</style>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="auto-div">
<img src="https://www.w3schools.com/css/img_forest.jpg" /><img src="https://www.w3schools.com/css/img_forest.jpg" /><img src="https://www.w3schools.com/css/img_forest.jpg" /><img src="https://www.w3schools.com/css/img_forest.jpg" /><img src="https://www.w3schools.com/css/img_forest.jpg" /><img src="https://www.w3schools.com/css/img_forest.jpg" />
</div>
</body>
</html>
Here you are not giving any height and width to the div tag so the style overflow: auto is not working for you.
<div style="width:150px;height:150px;overflow:auto;border:1px solid black">
<image src="images.jpg"></image>
<image src="images.jpg"></image>
<image src="images.jpg"></image>
<image src="images.jpg"></image>
</div>
How to avoid the spaces between img tags?
The content in the print screen is marked
code:
#menu > img {
margin:0px;
padding:0px;
}
<div id="menu">
<img src="/gfx/menu.home.png" />
<img src="/gfx/menu.functions.png" />
<img src="/gfx/menu.prices.png" />
</div>
Remove spaces between the img tags in your code.
<div id="menu">
<img src="/gfx/menu.home.png" /><img src="/gfx/menu.functions.png" /><img src="/gfx/menu.prices.png" />
</div>
You could float them:
#menu {
overflow: auto;
}
#menu > img {
float: left;
}
Live demo: http://jsfiddle.net/bzWYX/
Btw I have asked a similar question here.
<div>
<img src="/gfx/menu.home.png" /><img src="/gfx/menu.functions.png" /><img src="/gfx/menu.prices.png" />
</div>
Put the img tags on one line will do the trick.
I used to know how to put an image on top and then justify the text below the image so that it stays within the borders of the width of the image. However, now I have no idea how to do this. How is this accomplished?
Your HTML:
<div class="img-with-text">
<img src="yourimage.jpg" alt="sometext" />
<p>Some text</p>
</div>
If you know the width of your image, your CSS:
.img-with-text {
text-align: justify;
width: [width of img];
}
.img-with-text img {
display: block;
margin: 0 auto;
}
Otherwise your text below the image will free-flow. To prevent this, just set a width to your container.
You can use HTML5 <figcaption>:
<figure>
<img src="img.jpg" alt="my img"/>
<figcaption> Your text </figcaption>
</figure>
Working example.
In order to be able to justify the text, you need to know the width of the image. You can just use the normal width of the image, or use a different width, but IE 6 might get cranky at you and not scale.
Here's what you need:
<style type="text/css">
#container { width: 100px; //whatever width you want }
#image {width: 100%; //fill up whole div }
#text { text-align: justify; }
</style>
<div id="container">
<img src="" id="image" />
<p id="text">oooh look! text!</p>
</div>
This centers the "A" below the image:
<div style="text-align:center">
<asp:Image ID="Image1" runat="server" ImageUrl="~/Images/opentoselect.gif" />
<br />
A
</div>
That is ASP.Net and it would render the HTML as:
<div style="text-align:center">
<img id="Image1" src="Images/opentoselect.gif" style="border-width:0px;" />
<br />
A
</div>
I am not an expert in HTML but here is what worked for me:
<div class="img-with-text-below">
<img src="your-image.jpg" alt="alt-text" />
<p><center>Your text</center></p>
</div>