Unwanted white space between image and border

Question

Unwanted white space between image and border

Asked 5 years, 8 months ago

Viewed 290 times

1

Every time I put the edge it gets this problem, the funny thing is q this working well in other projects (I tried to put the edge straight in the figure.photo-caption img, it worked but to create the effects got pretty messed up and before it was like this.

<!DOCTYPE html>
<html lang="pt-br">
	<head>
		<meta charset="utf-8">
		<title> Testando </title>

		<style>

		figure.foto-legenda {
			border: 3px solid black;
			position: relative;

 		}

		figure.foto-legenda img {
			width: 100%;
			height: 100%;
		}

		figure.foto-legenda figcaption {
			position: absolute;
			top: 0px
		}

		</style>
	</head>
	<body>

	<h1>The Simpsons</h1>
		<figure class="foto-legenda">
			<img src="imagens/homer.jpg"/>
				<figcaption>
					<h1> Homer Simpson </h1>
				</figcaption>
		</figure>
	</body>
</html>

Does the image itself not have this white space? Dai it is better to remove cutting with some image editor

– Costamilam

2019/03/05 at 02:40
No and I have tested with several images.

– J Werneck

2019/03/05 at 02:53

2 answers

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.

by piresthiago10 • 39 points · Answer 1 · 2019-03-05T07:58:23+00:00

An alternative solution to your problem is to add width and height in figure.photo-caption:

<!DOCTYPE html>
<html lang="pt-br">
	<head>
		<meta charset="utf-8">
		<title> Testando </title>

		<style>

		figure.foto-legenda {
			border: 3px solid black;
			position: relative;
                        width: 800px;
                        height: 600px;

 		}

		figure.foto-legenda img {
			width: 100%;
			height: 100%;
		}

		figure.foto-legenda figcaption {
			position: absolute;
			top: 0px
		}

		</style>
	</head>
	<body>

	<h1>The Simpsons</h1>
		<figure class="foto-legenda">
			<img src="https://www.tricurioso.com/wp-content/uploads/2019/01/fatos-curiosos-sobre-o-homer-simpson-667x400.jpg"/>
				<figcaption>
					<h1> Homer Simpson </h1>
				</figcaption>
		</figure>
	</body>
</html>

by Vitor Giovanny • **109** points · Answer 2 · 2019-03-05T03:13:36+00:00

try this here

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="utf-8">
        <title> Testando </title>

        <style>

        figure.foto-legenda {
            border: 3px solid black;
            position: relative;
            display: flex;
        }

        figure.foto-legenda img {
            width: 100%;
            height: 100%;
        }

        figure.foto-legenda figcaption {
            position: absolute;
            top: 0px
        }

        </style>
    </head>
    <body>

    <h1>The Simpsons</h1>
        <figure class="foto-legenda">
            <img src="https://cdn-ofuxico.akamaized.net/img/upload/noticias/2018/08/22/what-homer-simpson-taught-us-about-doughnuts_327781_36.jpg"/>
                <figcaption>
                    <h1> Homer Simpson </h1>
                </figcaption>
        </figure>
    </body>
</html>