React Native WebView使用white-space:pre-line时div上下出现空白

我使用React Native WebView组件渲染富文本内容时，div元素的顶部（内容开头上方）和底部（YouTube视频下方）出现了多余空白，组件代码和返回内容如下：

WebView组件代码 #

<WebView
    javaScriptEnabled={true}
    injectedJavaScript ={webViewScript}
    domStorageEnabled={true}
    automaticallyAdjustContentInsets={false}
    scalesPageToFit={false}
    style={{height:webviewHeight}} 
    onMessage={event => {
        setWebViewHeight(parseInt(event.nativeEvent.data));
    }}
    source={{html: `
        <!DOCTYPE html>
        <html>
        <head>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
        </head>
        <body>
                <div style="white-space: pre-line; background-color:red;"> 
         
                        ${e["message"]["mess"].message}
         
                </div>
        
        </body>
        </html>     
                                `}} /> 

数据库返回的内容 #

Gghhhh

Hhhhjj

<a href="https://music.youtube.com/watch?v=OhnX77XVCmg&si=NmivfKlttLs_2hZI" target="_blank">music.youtube.com</a>

<div style="background-color:#000000;border-radius:20px;webkit-border-radius: 20px;-moz-border-radius: 20px;padding:0;margin:0;"><iframe style="background-color:#000000;padding:0;margin:0;border-radius:10px;width:100%;height:200px;" src="https://www.youtube.com/embed/75fDo2yk6RM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>

渲染后效果如图：

出现空白的核心原因有两个：一是HTML的<body>标签默认带有margin和padding，二是包裹内容的div里存在多余的换行、空格字符，加上white-space: pre-line属性会保留这些空白。按以下步骤修复：

1. 清除body默认边距
   在HTML的<head>标签内添加全局样式，重置body的margin和padding：

<style>
    body { margin: 0; padding: 0; }
</style>

2. 移除div内的多余空白字符
   原代码中包裹内容的div里有多余的换行和空格，这些会被white-space: pre-line解析成空白区域。把div改成紧凑写法，去掉内容前后的换行和空格：

<div style="white-space: pre-line; background-color:red;">${e["message"]["mess"].message}</div>

3. 可选：全局样式重置（更彻底）
   如果后续还有其他元素引发的空白问题，可以添加通用样式重置，覆盖所有元素的默认边距：

<style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { margin: 0; padding: 0; }
</style>

修改后的完整WebView HTML部分代码：

source={{html: `
    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
        body { margin: 0; padding: 0; }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    </head>
    <body>
        <div style="white-space: pre-line; background-color:red;">${e["message"]["mess"].message}</div>
    </body>
    </html>     
`}}

内容的提问来源于stack exchange，提问作者redoc01