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>
Related
I have a list of images, those image elements have a attribute like index, which I want to use to sort the element of the images in ascending order. with the help of CSS.
Because that index attribute value will change dynamically, more image will also be added by Ajax. So when it will update, that time it will be arranged in that order without doing anything.
.img_container {
width: 100%;
border: 2px black solid;
}
.img_container img {
margin-bottom: 5px;
margin-right: 5px;
}
<div class="img_container">
<img src="https://dummyimage.com/100x150/000000/ffffff&text=1" index="1">
<img src="https://dummyimage.com/100x150/000000/ffffff&text=10" index="10">
<img src="https://dummyimage.com/110x150/000000/ffffff&text=11" index="11">
<img src="https://dummyimage.com/140x150/000000/ffffff&text=14" index="14">
<img src="https://dummyimage.com/200x150/000000/ffffff&text=2" index="2">
<img src="https://dummyimage.com/120x150/000000/ffffff&text=12" index="12">
<img src="https://dummyimage.com/130x150/000000/ffffff&text=13" index="13">
<img src="https://dummyimage.com/300x150/000000/ffffff&text=3" index="3">
<img src="https://dummyimage.com/400x150/000000/ffffff&text=4" index="4">
<img src="https://dummyimage.com/150x150/000000/ffffff&text=15" index="15">
<img src="https://dummyimage.com/500x150/000000/ffffff&text=5" index="5">
<img src="https://dummyimage.com/400x150/000000/ffffff&text=6" index="6">
<img src="https://dummyimage.com/170x150/000000/ffffff&text=17" index="17">
<img src="https://dummyimage.com/300x150/000000/ffffff&text=7" index="7">
<img src="https://dummyimage.com/160x150/000000/ffffff&text=16" index="16">
<img src="https://dummyimage.com/200x150/000000/ffffff&text=8" index="8">
<img src="https://dummyimage.com/180x150/000000/ffffff&text=18" index="18">
<img src="https://dummyimage.com/200x150/000000/ffffff&text=9" index="9">
</div>
Let me know if there is any easy way to do this in CSS.
There is not a good CSS-only solution yet without modifying the HTML or adding inline styles. In the future, it may be possible to achieve this using the attr() function in CSS, but currently this doesn't have wide support for being able to use it outside of the content property.
If the more advanced usage is adopted, a future solution could look like this. Note, this will not work in most current browsers. And you should also use the data- prefix for custom attributes.
.img_container {
border: 2px black solid;
display: flex;
flex-wrap: wrap;
}
.img_container img {
margin: 5px;
order: attr(data-index); /* will not work yet in most browsers */
}
<div class="img_container">
<img src="https://dummyimage.com/100x150/000000/ffffff&text=1" data-index="1">
<img src="https://dummyimage.com/100x150/000000/ffffff&text=10" data-index="10">
<img src="https://dummyimage.com/110x150/000000/ffffff&text=11" data-index="11">
<img src="https://dummyimage.com/140x150/000000/ffffff&text=14" data-index="14">
<img src="https://dummyimage.com/200x150/000000/ffffff&text=2" data-index="2">
<img src="https://dummyimage.com/120x150/000000/ffffff&text=12" data-index="12">
<img src="https://dummyimage.com/130x150/000000/ffffff&text=13" data-index="13">
<img src="https://dummyimage.com/300x150/000000/ffffff&text=3" data-index="3">
<img src="https://dummyimage.com/400x150/000000/ffffff&text=4" data-index="4">
<img src="https://dummyimage.com/150x150/000000/ffffff&text=15" data-index="15">
<img src="https://dummyimage.com/500x150/000000/ffffff&text=5" data-index="5">
<img src="https://dummyimage.com/400x150/000000/ffffff&text=6" data-index="6">
<img src="https://dummyimage.com/170x150/000000/ffffff&text=17" data-index="17">
<img src="https://dummyimage.com/300x150/000000/ffffff&text=7" data-index="7">
<img src="https://dummyimage.com/160x150/000000/ffffff&text=16" data-index="16">
<img src="https://dummyimage.com/200x150/000000/ffffff&text=8" data-index="8">
<img src="https://dummyimage.com/180x150/000000/ffffff&text=18" data-index="18">
<img src="https://dummyimage.com/200x150/000000/ffffff&text=9" data-index="9">
</div>
Can someone show me how to put text under every individual image and also images must be in same line which is working? I understand that default display for "a" tag is block and for "img" tag is display inline.
This is my code:
HTML
<div class="other-content">
<div class="search">
<h1>We Offer best experience in the world</h1>
<img src="../Images/beach.jpg" alt="beach" width="200px" height="150px">
<p>sadasdasd</p>
<img src="../Images/desert.jpg" alt="desert" width="200px" height="150px">
<p>sadasdasd</p>
<img src="../Images/evergreen.jpg" alt="maoutin" width="200px" height="150px">
<p>sadasdasd</p>
<img src="../Images/snow-pathway.jpg" alt="snow-pathway" width="200px" height="150px">
</div>
</div>
CSS
.other-content .search {
background: #ffffff;
height: 300px;
text-align: center;
}
.other-content .search p{
display: inline;
}
Just put the picture with the text in separate divs and make the divs width smaller until the text is below the picture. And with these divs, assign display:inline-block;
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>
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;
}
How can I put the following elements on the same line? I know it has to do with the display property, but that's the one that always stumps me and can never seem to get to work.
http://jsfiddle.net/MgcDU/4137/
HTML:
<div class="container">
<div class="small-video-section">
<div class="thumbnail-container">
<img src="http://i2.ytimg.com/vi/yKWoPlL2B8I/mqdefault.jpg" width="220" />
</div>
<div class="thumbnail-container">
<img src="http://i2.ytimg.com/vi/yKWoPlL2B8I/mqdefault.jpg" width="220" />
</div>
<div class="thumbnail-container">
<img src="http://i2.ytimg.com/vi/yKWoPlL2B8I/mqdefault.jpg" width="220" />
</div>
<div class="thumbnail-last">
<img src="http://i2.ytimg.com/vi/yKWoPlL2B8I/mqdefault.jpg" width="220" />
</div>
</div>
</div>
CSS:
.small-video-section {
height: 134px;
}
.thumbnail-container {
width: 220px;
margin-top: 15px;
margin-right: 20px;
display: inline-block;
}
.thumbnail-last {
width: 220px;
margin-top: 15px;
display: block;
}
Thanks. :)
You could use float: left or float: right
img {float: left;}
Note, you'll have to use clearfix which Mr Gallagher explains nicely or follow with any element that has clear: both; on it to get the results you expect.
You can position them absolutely
img {position: absolute;}
and then position one by one using left and right or margins
img.image-one {left: 0: top: 0;}
img.image-one {right: 300px; top: 0;}
img.image-three {margin-left: 100px;}
/*etc etc...*/
EDIT: didn't notice the divs, you should put float left on those as someone else mentioned, however both options technically work in your case. Theres probably a dozen more ways to do this...
Changing display:block to display:inline-block in your .thumbnail-last rule will do it.
try float: left on the divs. That will get everyone to show up in line. other wise block elements introduce a break
Try this code :- Use only float:left
<div class="container">
<div class="small-video-section">
<div class="thumbnail-container" style="float:left;height:134px;width:150px">
<img src="http://i2.ytimg.com/vi/yKWoPlL2B8I/mqdefault.jpg" width="150" />
</div>
<div class="thumbnail-container" style="float:left;height:134px;width:150px">
<img src="http://i2.ytimg.com/vi/yKWoPlL2B8I/mqdefault.jpg" width="150" />
</div>
<div class="thumbnail-container" style="float:left;height:134px;width:150px">
<img src="http://i2.ytimg.com/vi/yKWoPlL2B8I/mqdefault.jpg" width="150" />
</div>
<div class="thumbnail-last" style="float:left;height:134px;width:150px">
<img src="http://i2.ytimg.com/vi/yKWoPlL2B8I/mqdefault.jpg" width="150" />
</div>
</div>
</div>
All your code are ok. But , I have only added style in HTML part.
Update link :-
http://jsfiddle.net/MgcDU/4148/
Its working fine.
It's an old post but it cames when searching for place elements on the same line with bootstrap so I will help others.
Boostrap has the Inline form class to place some elements on the same line (it's left aligned).
Bootstrap CSS inline form