# 画像におけるパディングの不整合
**URL:** https://meta.discourse.org/t/padding-inconsistencies-with-images/258682
**Category:** UX
**Created:** [2023 年 3 月 20 日午前 12:32 UTC](https://meta.discourse.org/t/padding-inconsistencies-with-images/258682 "2023-03-20T00:32:04Z")
**Posts on this page:** 9
**Page:** 1
### Author:  [@rahim123](https://meta.discourse.org/u/rahim123)
#### Post date: [2023 年 3 月 20 日午前 12:32 UTC](https://meta.discourse.org/t/padding-inconsistencies-with-images/258682/1 "2023-03-20T00:32:04Z")
ちょっとした不満ですが、投稿プレビューに表示される内容と、実際に投稿された内容の間にわずかな違いがあり、アップロードされた画像かホットリンクされた画像かによって異なります。
* * *
ホットリンクされた画像、このテキストの後に空行はありません：
テキストが続きます。その前に空行はありません。
アップロードされた画像、このテキストの後に空行はありません：
テキストが続きます。その前に空行はありません。
---
### Author:  [@rahim123](https://meta.discourse.org/u/rahim123)
#### Post date: [2023 年 3 月 20 日午前 12:34 UTC](https://meta.discourse.org/t/padding-inconsistencies-with-images/258682/2 "2023-03-20T00:34:52Z")
---
### Author:  [@rahim123](https://meta.discourse.org/u/rahim123)
#### Post date: [2023 年 3 月 20 日午前 12:55 UTC](https://meta.discourse.org/t/padding-inconsistencies-with-images/258682/4 "2023-03-20T00:55:37Z")
ホットリンクされた画像の前のテキスト、テキストの後に空行なし:
後のテキスト、その前に空行なし。
アップロードされた画像の前のテキスト、テキストの後に空行なし:
後のテキスト、その前に空行なし。
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [2023 年 3 月 20 日午前 11:09 UTC](https://meta.discourse.org/t/padding-inconsistencies-with-images/258682/5 "2023-03-20T11:09:44Z")
ホットリンクされた画像には、次の CSS が適用されています。
```css
.d-editor-preview img {
padding-bottom: 1.4em;
}
```
一方、アップロードされた画像には次の CSS が適用されています。
```css
.d-editor-preview .image-wrapper img {
padding-bottom: 0;
}
```
リモート画像が Discourse にダウンロードされた場合も同様に発生します。この場合、寸法が設定されていないため、プレビューに image-wrapper が作成されません。
リモート画像がダウンロードされました。
``
アップロードされた画像:
``
---
### Author:  [@rahim123](https://meta.discourse.org/u/rahim123)
#### Post date: [2023 年 3 月 20 日午後 12:51 UTC](https://meta.discourse.org/t/padding-inconsistencies-with-images/258682/6 "2023-03-20T12:51:27Z")
> [@Canapin](#):
>
> リモート画像がDiscourseにダウンロードされた場合にも発生します。この場合、ディメンションが設定されていないため、プレビューで画像ラッパーが作成されません。
興味深いですね。ありがとうございます。
ホットリンクされた画像がダウンロードされる場合、最初に公開された投稿では画像と上のテキストの間にパディングがありませんが、数分後にキュー内のプロセスがリモート画像をダウンロードするためにトリガーされると、パディングが増加することにも気づきました。これは、投稿履歴の修正として、パディングギャップの視覚的な変更で見ることができます。
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [2023 年 3 月 20 日午後 1:05 UTC](https://meta.discourse.org/t/padding-inconsistencies-with-images/258682/7 "2023-03-20T13:05:37Z")
> [@rahim123](#):
>
> しかし、キュー内のプロセスがリモート画像をダウンロードするためにトリガーされると、数分後にパディングが増加します。
投稿を再構築し、画像ビューアですべてのHTMLを追加するため、マージンまたはパディングが異なるのだと思います。
---
### Author:  [@rahim123](https://meta.discourse.org/u/rahim123)
#### Post date: [2023 年 3 月 20 日午後 1:09 UTC](https://meta.discourse.org/t/padding-inconsistencies-with-images/258682/8 "2023-03-20T13:09:55Z")
なるほど、ありがとうございます。それらの不整合がいくつか修正されると良いですね。驚くべきことに、ユーザーはそれに気づき、特に他のフォーラムエンジンでWYSIWYGエディターに慣れていると、それらにイライラします。リモート画像がダウンロードされた後に投稿のレンダリングが自己変更するのはさらに奇妙ですが、技術的な理由があることは完全に理解しています。
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [2023 年 3 月 20 日午後 1:14 UTC](https://meta.discourse.org/t/padding-inconsistencies-with-images/258682/9 "2023-03-20T13:14:03Z")
はい、いくつかの矛盾があります。
例えば、同様のものです。
> [@Weird vertical space behavior on the message editor / preview](https://meta.discourse.org/t/weird-vertical-space-behavior-on-the-message-editor-preview/90639?u=canapin):
>
> Hi. I wrote a message like this: When I add a new line between the URL and the image, the vertical space on the preview disappears: That’s odd and a bit counter-intuitive.
---
### Author:  [@sam](https://meta.discourse.org/u/sam)
#### Post date: [2023 年 3 月 23 日午前 4:43 UTC](https://meta.discourse.org/t/padding-inconsistencies-with-images/258682/10 "2023-03-23T04:43:58Z")
この奇妙な挙動のいくつかは、@Johani の [変更](https://meta.discourse.org/t/migrating-away-from-magnific-popup/251505) をマージすると解消されると考えています。