PyScript执行显示异常：出现多余空白区域，如何消除？

你遇到的空白是PyScript默认终端输出元素自带的样式（比如内边距、最小高度）导致的，再加上你之前的div样式语法错误（CSS属性与值之间需用冒号:而非等号=），所以之前的方法没起作用。试试以下两种解决方案：

方法1：修正样式语法并覆盖终端默认样式 #

先把div的样式写法纠正，再通过自定义CSS去掉PyScript终端的多余默认样式：

<html>
    <head>
        <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
        <script defer src="https://pyscript.net/latest/pyscript.js"></script>
        <style>
            /* 覆盖PyScript默认终端的冗余样式 */
            .py-terminal {
                padding: 0;
                min-height: auto;
                margin: 0;
                border: none; /* 如果不需要边框也可以去掉 */
            }
        </style>
    </head>
    <body>
      <div style="width: 300px; height: 300px;">
        <script type="py">
          print("Hello, World!")
        </script>
      </div>
    </body>
</html>

方法2：定向输出到自定义元素，精准控制范围 #

利用PyScript的output属性，将print内容定向到你指定的元素，完全掌控显示区域：

<html>
    <head>
        <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
        <script defer src="https://pyscript.net/latest/pyscript.js"></script>
        <style>
            #custom-output {
                width: 300px;
                height: 300px;
                overflow: auto; /* 内容超出时可滚动 */
                /* 可根据需求添加其他样式 */
            }
        </style>
    </head>
    <body>
      <div id="custom-output"></div>
      <script type="py" output="custom-output">
          print("Hello, World!")
      </script>
    </body>
</html>

补充说明 #

• 第一种方法适合快速修改默认输出的样式，第二种方法更灵活，能完全自定义输出区域的布局。
• 之前的div样式无效核心原因是CSS属性和值之间必须用冒号分隔，而非等号，这是基础语法错误。

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