Reduce the space between images and their underlying text
up vote
0
down vote
favorite
I have the following which shows 4 images and under each image there is a <a> link, as follow:-
The problem is that if the <a> text only spans one line, then there will be some wasted space between the images and the links as shown above (picture 1 & 4), while if the link text spans 2 lines (picture 2 & 3) then this space will be gently occupied. Can I force the space to be eliminated regardless of the link text spanning 1 or 2 lines?
here is the HTML for building a single <div>
<div style="float: left;margin-left:0px;max-width:185px">
<img style="height:90px;width:185px" src="https://******.jpg" alt="ntitle">
<span style="font-size:9px;display:inline-block;line-height:9px">
<a target="_blank" href="http://*********">*********</a>
</span>
</div>
html css
edited Nov 7 at 12:33
mplungjan
85.7k20120180
asked Nov 7 at 12:24
test test
39261232
add a comment |
up vote
0
down vote
favorite
I have the following which shows 4 images and under each image there is a <a> link, as follow:-
The problem is that if the <a> text only spans one line, then there will be some wasted space between the images and the links as shown above (picture 1 & 4), while if the link text spans 2 lines (picture 2 & 3) then this space will be gently occupied. Can I force the space to be eliminated regardless of the link text spanning 1 or 2 lines?
here is the HTML for building a single <div>
<div style="float: left;margin-left:0px;max-width:185px">
<img style="height:90px;width:185px" src="https://******.jpg" alt="ntitle">
<span style="font-size:9px;display:inline-block;line-height:9px">
<a target="_blank" href="http://*********">*********</a>
</span>
</div>
html css
edited Nov 7 at 12:33
mplungjan
85.7k20120180
asked Nov 7 at 12:24
test test
39261232
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
I have the following which shows 4 images and under each image there is a <a> link, as follow:-
The problem is that if the <a> text only spans one line, then there will be some wasted space between the images and the links as shown above (picture 1 & 4), while if the link text spans 2 lines (picture 2 & 3) then this space will be gently occupied. Can I force the space to be eliminated regardless of the link text spanning 1 or 2 lines?
here is the HTML for building a single <div>
<div style="float: left;margin-left:0px;max-width:185px">
<img style="height:90px;width:185px" src="https://******.jpg" alt="ntitle">
<span style="font-size:9px;display:inline-block;line-height:9px">
<a target="_blank" href="http://*********">*********</a>
</span>
</div>
html css
edited Nov 7 at 12:33
mplungjan
85.7k20120180
asked Nov 7 at 12:24
test test
39261232
I have the following which shows 4 images and under each image there is a <a> link, as follow:-
The problem is that if the <a> text only spans one line, then there will be some wasted space between the images and the links as shown above (picture 1 & 4), while if the link text spans 2 lines (picture 2 & 3) then this space will be gently occupied. Can I force the space to be eliminated regardless of the link text spanning 1 or 2 lines?
here is the HTML for building a single <div>
<div style="float: left;margin-left:0px;max-width:185px">
<img style="height:90px;width:185px" src="https://******.jpg" alt="ntitle">
<span style="font-size:9px;display:inline-block;line-height:9px">
<a target="_blank" href="http://*********">*********</a>
</span>
</div>
html css
html css
edited Nov 7 at 12:33
mplungjan
85.7k20120180
asked Nov 7 at 12:24
test test
39261232
edited Nov 7 at 12:33
mplungjan
85.7k20120180
asked Nov 7 at 12:24
test test
39261232
edited Nov 7 at 12:33
mplungjan
85.7k20120180
edited Nov 7 at 12:33
mplungjan
85.7k20120180
edited Nov 7 at 12:33
mplungjan
85.7k20120180
85.7k20120180
asked Nov 7 at 12:24
test test
39261232
asked Nov 7 at 12:24
test test
39261232
asked Nov 7 at 12:24
test test
39261232
39261232
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
up vote
-2
down vote
you need to start using css grid
.wrap {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 200px 200px;
grid-template-areas: "image1 image2" "image3 image4";
grid-gap: 0px;
}
img{
width: 300px;
height: auto;
}
.centered {
color: orangered;
position: absolute;
margin-top: 50%;
margin-left: 50%;
transform: translate(-50%, -50%);
}
.image1{
position: relative;
grid-area: image1;
overflow: hidden;
border: 2px solid white;
background-color: black;
}
.image2{
position: relative;
grid-area: image2;
overflow: hidden;
border: 2px solid white;
background-color: black;
}
.image3{
position: relative;
grid-area: image3;
overflow: hidden;
border: 2px solid white;
background-color: black;
}
.image4{
position: relative;
grid-area: image4;
overflow: hidden;
border: 2px solid white;
background-color: black;
}
<div class="wrap">
<div class="image1">
<div class="centered">Centered</div>
<img src="https://i.imgur.com/oszfvKQ.jpg">
</div>
<div class="image2">
<div class="centered">Centered</div>
<img src="https://i.imgur.com/c1OFZbI.jpg">
</div>
<div class="image3">
<div class="centered">Centered</div>
<img src="https://i.imgur.com/gHaJUA8.jpg">
</div>
<div class="image4">
<div class="centered">Centered</div>
<img src="https://i.imgur.com/AhxnhRC.jpg">
</div>
</div>Everything your trying to do is posible with css grid https://www.w3schools.com/css/css_grid.asp
or
https://youtu.be/FEnRpy9Xfes
answered Nov 7 at 12:56
Jose Manuel Zuñiga Moreno
207
thanks for the reply..now i do not want to re-engineer my code,i am trying to fix the current code instead... thanks
– test test
Nov 7 at 13:04
i guess that if the issue is the length of the link, you could just short it with google goo.gl or do a html box to input the link and hide 8+ characters ????? Its easier to just use css grid.
– Jose Manuel Zuñiga Moreno
Nov 7 at 13:11
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
-2
down vote
you need to start using css grid
.wrap {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 200px 200px;
grid-template-areas: "image1 image2" "image3 image4";
grid-gap: 0px;
}
img{
width: 300px;
height: auto;
}
.centered {
color: orangered;
position: absolute;
margin-top: 50%;
margin-left: 50%;
transform: translate(-50%, -50%);
}
.image1{
position: relative;
grid-area: image1;
overflow: hidden;
border: 2px solid white;
background-color: black;
}
.image2{
position: relative;
grid-area: image2;
overflow: hidden;
border: 2px solid white;
background-color: black;
}
.image3{
position: relative;
grid-area: image3;
overflow: hidden;
border: 2px solid white;
background-color: black;
}
.image4{
position: relative;
grid-area: image4;
overflow: hidden;
border: 2px solid white;
background-color: black;
}
<div class="wrap">
<div class="image1">
<div class="centered">Centered</div>
<img src="https://i.imgur.com/oszfvKQ.jpg">
</div>
<div class="image2">
<div class="centered">Centered</div>
<img src="https://i.imgur.com/c1OFZbI.jpg">
</div>
<div class="image3">
<div class="centered">Centered</div>
<img src="https://i.imgur.com/gHaJUA8.jpg">
</div>
<div class="image4">
<div class="centered">Centered</div>
<img src="https://i.imgur.com/AhxnhRC.jpg">
</div>
</div>Everything your trying to do is posible with css grid https://www.w3schools.com/css/css_grid.asp
or
https://youtu.be/FEnRpy9Xfes
answered Nov 7 at 12:56
Jose Manuel Zuñiga Moreno
207
thanks for the reply..now i do not want to re-engineer my code,i am trying to fix the current code instead... thanks
– test test
Nov 7 at 13:04
i guess that if the issue is the length of the link, you could just short it with google goo.gl or do a html box to input the link and hide 8+ characters ????? Its easier to just use css grid.
– Jose Manuel Zuñiga Moreno
Nov 7 at 13:11
add a comment |
up vote
-2
down vote
you need to start using css grid
.wrap {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 200px 200px;
grid-template-areas: "image1 image2" "image3 image4";
grid-gap: 0px;
}
img{
width: 300px;
height: auto;
}
.centered {
color: orangered;
position: absolute;
margin-top: 50%;
margin-left: 50%;
transform: translate(-50%, -50%);
}
.image1{
position: relative;
grid-area: image1;
overflow: hidden;
border: 2px solid white;
background-color: black;
}
.image2{
position: relative;
grid-area: image2;
overflow: hidden;
border: 2px solid white;
background-color: black;
}
.image3{
position: relative;
grid-area: image3;
overflow: hidden;
border: 2px solid white;
background-color: black;
}
.image4{
position: relative;
grid-area: image4;
overflow: hidden;
border: 2px solid white;
background-color: black;
}
<div class="wrap">
<div class="image1">
<div class="centered">Centered</div>
<img src="https://i.imgur.com/oszfvKQ.jpg">
</div>
<div class="image2">
<div class="centered">Centered</div>
<img src="https://i.imgur.com/c1OFZbI.jpg">
</div>
<div class="image3">
<div class="centered">Centered</div>
<img src="https://i.imgur.com/gHaJUA8.jpg">
</div>
<div class="image4">
<div class="centered">Centered</div>
<img src="https://i.imgur.com/AhxnhRC.jpg">
</div>
</div>Everything your trying to do is posible with css grid https://www.w3schools.com/css/css_grid.asp
or
https://youtu.be/FEnRpy9Xfes
answered Nov 7 at 12:56
Jose Manuel Zuñiga Moreno
207
thanks for the reply..now i do not want to re-engineer my code,i am trying to fix the current code instead... thanks
– test test
Nov 7 at 13:04
i guess that if the issue is the length of the link, you could just short it with google goo.gl or do a html box to input the link and hide 8+ characters ????? Its easier to just use css grid.
– Jose Manuel Zuñiga Moreno
Nov 7 at 13:11
add a comment |
up vote
-2
down vote
up vote
-2
down vote
you need to start using css grid
.wrap {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 200px 200px;
grid-template-areas: "image1 image2" "image3 image4";
grid-gap: 0px;
}
img{
width: 300px;
height: auto;
}
.centered {
color: orangered;
position: absolute;
margin-top: 50%;
margin-left: 50%;
transform: translate(-50%, -50%);
}
.image1{
position: relative;
grid-area: image1;
overflow: hidden;
border: 2px solid white;
background-color: black;
}
.image2{
position: relative;
grid-area: image2;
overflow: hidden;
border: 2px solid white;
background-color: black;
}
.image3{
position: relative;
grid-area: image3;
overflow: hidden;
border: 2px solid white;
background-color: black;
}
.image4{
position: relative;
grid-area: image4;
overflow: hidden;
border: 2px solid white;
background-color: black;
}
<div class="wrap">
<div class="image1">
<div class="centered">Centered</div>
<img src="https://i.imgur.com/oszfvKQ.jpg">
</div>
<div class="image2">
<div class="centered">Centered</div>
<img src="https://i.imgur.com/c1OFZbI.jpg">
</div>
<div class="image3">
<div class="centered">Centered</div>
<img src="https://i.imgur.com/gHaJUA8.jpg">
</div>
<div class="image4">
<div class="centered">Centered</div>
<img src="https://i.imgur.com/AhxnhRC.jpg">
</div>
</div>Everything your trying to do is posible with css grid https://www.w3schools.com/css/css_grid.asp
or
https://youtu.be/FEnRpy9Xfes
answered Nov 7 at 12:56
Jose Manuel Zuñiga Moreno
207
you need to start using css grid
.wrap {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 200px 200px;
grid-template-areas: "image1 image2" "image3 image4";
grid-gap: 0px;
}
img{
width: 300px;
height: auto;
}
.centered {
color: orangered;
position: absolute;
margin-top: 50%;
margin-left: 50%;
transform: translate(-50%, -50%);
}
.image1{
position: relative;
grid-area: image1;
overflow: hidden;
border: 2px solid white;
background-color: black;
}
.image2{
position: relative;
grid-area: image2;
overflow: hidden;
border: 2px solid white;
background-color: black;
}
.image3{
position: relative;
grid-area: image3;
overflow: hidden;
border: 2px solid white;
background-color: black;
}
.image4{
position: relative;
grid-area: image4;
overflow: hidden;
border: 2px solid white;
background-color: black;
}
<div class="wrap">
<div class="image1">
<div class="centered">Centered</div>
<img src="https://i.imgur.com/oszfvKQ.jpg">
</div>
<div class="image2">
<div class="centered">Centered</div>
<img src="https://i.imgur.com/c1OFZbI.jpg">
</div>
<div class="image3">
<div class="centered">Centered</div>
<img src="https://i.imgur.com/gHaJUA8.jpg">
</div>
<div class="image4">
<div class="centered">Centered</div>
<img src="https://i.imgur.com/AhxnhRC.jpg">
</div>
</div>Everything your trying to do is posible with css grid https://www.w3schools.com/css/css_grid.asp
or
https://youtu.be/FEnRpy9Xfes
.wrap {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 200px 200px;
grid-template-areas: "image1 image2" "image3 image4";
grid-gap: 0px;
}
img{
width: 300px;
height: auto;
}
.centered {
color: orangered;
position: absolute;
margin-top: 50%;
margin-left: 50%;
transform: translate(-50%, -50%);
}
.image1{
position: relative;
grid-area: image1;
overflow: hidden;
border: 2px solid white;
background-color: black;
}
.image2{
position: relative;
grid-area: image2;
overflow: hidden;
border: 2px solid white;
background-color: black;
}
.image3{
position: relative;
grid-area: image3;
overflow: hidden;
border: 2px solid white;
background-color: black;
}
.image4{
position: relative;
grid-area: image4;
overflow: hidden;
border: 2px solid white;
background-color: black;
}
<div class="wrap">
<div class="image1">
<div class="centered">Centered</div>
<img src="https://i.imgur.com/oszfvKQ.jpg">
</div>
<div class="image2">
<div class="centered">Centered</div>
<img src="https://i.imgur.com/c1OFZbI.jpg">
</div>
<div class="image3">
<div class="centered">Centered</div>
<img src="https://i.imgur.com/gHaJUA8.jpg">
</div>
<div class="image4">
<div class="centered">Centered</div>
<img src="https://i.imgur.com/AhxnhRC.jpg">
</div>
</div> .wrap {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 200px 200px;
grid-template-areas: "image1 image2" "image3 image4";
grid-gap: 0px;
}
img{
width: 300px;
height: auto;
}
.centered {
color: orangered;
position: absolute;
margin-top: 50%;
margin-left: 50%;
transform: translate(-50%, -50%);
}
.image1{
position: relative;
grid-area: image1;
overflow: hidden;
border: 2px solid white;
background-color: black;
}
.image2{
position: relative;
grid-area: image2;
overflow: hidden;
border: 2px solid white;
background-color: black;
}
.image3{
position: relative;
grid-area: image3;
overflow: hidden;
border: 2px solid white;
background-color: black;
}
.image4{
position: relative;
grid-area: image4;
overflow: hidden;
border: 2px solid white;
background-color: black;
}
<div class="wrap">
<div class="image1">
<div class="centered">Centered</div>
<img src="https://i.imgur.com/oszfvKQ.jpg">
</div>
<div class="image2">
<div class="centered">Centered</div>
<img src="https://i.imgur.com/c1OFZbI.jpg">
</div>
<div class="image3">
<div class="centered">Centered</div>
<img src="https://i.imgur.com/gHaJUA8.jpg">
</div>
<div class="image4">
<div class="centered">Centered</div>
<img src="https://i.imgur.com/AhxnhRC.jpg">
</div>
</div>answered Nov 7 at 12:56
Jose Manuel Zuñiga Moreno
207
edited Nov 7 at 13:04
answered Nov 7 at 12:56
Jose Manuel Zuñiga Moreno
207
answered Nov 7 at 12:56
Jose Manuel Zuñiga Moreno
207
answered Nov 7 at 12:56
Jose Manuel Zuñiga Moreno
207
207
thanks for the reply..now i do not want to re-engineer my code,i am trying to fix the current code instead... thanks
– test test
Nov 7 at 13:04
i guess that if the issue is the length of the link, you could just short it with google goo.gl or do a html box to input the link and hide 8+ characters ????? Its easier to just use css grid.
– Jose Manuel Zuñiga Moreno
Nov 7 at 13:11
add a comment |
thanks for the reply..now i do not want to re-engineer my code,i am trying to fix the current code instead... thanks
– test test
Nov 7 at 13:04
i guess that if the issue is the length of the link, you could just short it with google goo.gl or do a html box to input the link and hide 8+ characters ????? Its easier to just use css grid.
– Jose Manuel Zuñiga Moreno
Nov 7 at 13:11
thanks for the reply..now i do not want to re-engineer my code,i am trying to fix the current code instead... thanks
– test test
Nov 7 at 13:04
thanks for the reply..now i do not want to re-engineer my code,i am trying to fix the current code instead... thanks
– test test
Nov 7 at 13:04
i guess that if the issue is the length of the link, you could just short it with google goo.gl or do a html box to input the link and hide 8+ characters ????? Its easier to just use css grid.
– Jose Manuel Zuñiga Moreno
Nov 7 at 13:11
i guess that if the issue is the length of the link, you could just short it with google goo.gl or do a html box to input the link and hide 8+ characters ????? Its easier to just use css grid.
– Jose Manuel Zuñiga Moreno
Nov 7 at 13:11
add a comment |
draft saved
draft discarded
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53189434%2freduce-the-space-between-images-and-their-underlying-text%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
