Lors de l'impression (sortie PDF) du code HTML suivant, il y a parfois une bordure / un espace blanc indésirable autour des images. Parfois, il apparaît sur le côté droit d'autres fois sur le côté gauche. Il semble ne faire qu'un pixel de large.
J'ai déjà essayé display: block;en vain.
Comment puis-je me débarrasser de l'espace blanc autour de l'image?
corps:
<body>
<div class="doc">
<div class="container-row">
<div class="container leftSide">
<div class="item">Item A</div>
<img class="image" src="http://via.placeholder.com/350x450">
</div>
</div>
<div class="container-row">
<div class="container rightSide">
<div class="item">Item A</div>
<img class="image" src="http://via.placeholder.com/350x450">
</div>
</div>
<!-- plus more "container-row"s -->
</div>
</body>
partie pertinente du CSS:
@media print {
.container-row {
page-break-inside: avoid;
}
}
body {
background-color: transparent;
margin: 0 !important;
padding: 0 !important;
}
.doc {
font-size: 0;
}
.container-row {
display: inline-block;
width: 100%;
border: 1px transparent solid;
font-size: 10px;
}
.container {
max-width: 75%;
word-wrap: break-word;
margin: 10px 10px 0px 10px;
overflow: hidden;
}
.image {
width: 100%;
margin: 5px 0px -5px;
}
.leftSide {
float: left;
border-top-left-radius: 13px;
border-top-right-radius: 13px;
border-bottom-right-radius: 13px;
}
.rightSide {
float: right;
border-top-left-radius: 13px;
border-top-right-radius: 13px;
border-bottom-left-radius: 13px;
}
.item {
margin: 7px 10px 1px 10px;
}
.container p {
margin-top: 0px;
margin-left: 10px;
margin-bottom: 7px;
margin-right: 10px;
padding: 0px;
}
Résolution du problème en ajustant le css de la imageclasse à:
.image {
width: 102%;
margin: 5px -1% -5px;
}
Cet article est collecté sur Internet, veuillez indiquer la source lors de la réimpression.
En cas d'infraction, veuillez [email protected] Supprimer.
laisse moi dire quelques mots