Question

我正在使用auto growable div来显示代码。它在代码上方显示一行空格，在代码下方显示一行空格。我想删除它。我尽我所能但失败了。你能帮忙吗？谢谢你们的支持。这是它的外观图像 - image of output

这是我的代码

.code{
    background-color: #d1e0e0;
    font-family: 'Microsoft New Tai Lue', sans-serif;
    font-size: 15px;
    overflow: hidden;
    height: auto;
    width: 100%;
}

<html>
    <head>
        <title>HTML Tutorial</title>
        
    </head>
    <body>
        <div class="code" id="text">
            <xmp>
                        <!DOCTYPE html>
                        <html>
                            <head>
                                <title>HTML Tutorial</title>
                            </head>
                            <body>
                                This is a simple HTML page
                            </body>
                        </html>
            </xmp>            
        </div>
    </body>
</html>

Answer 1

您可以在html中调整间距。

.code{
background-color: #d1e0e0;
font-family: 'Microsoft New Tai Lue', sans-serif;
font-size: 15px;
overflow: hidden;
height: auto;
width: 100%;
}

<div class="code" id="text">
        <xmp>                        <!DOCTYPE html>
                    <html>
                        <head>
                            <title>HTML Tutorial</title>
                        </head>
                        <body>
                            This is a simple HTML page
                        </body>
                    </html></xmp>            
    </div>

Answer 2

给予保证金和填充0px

element { margin: 0px; padding: 0px; }

Answer 3

如果你没问题，请使用它。希望它能帮到你。谢谢。

.code{
    background-color: #d1e0e0;
    font-family: 'Microsoft New Tai Lue', sans-serif;
    font-size: 15px;
    overflow: hidden;
    height: auto;
    width: 100%;
}
xmp {
    margin: 0px;
    line-height: 1;}

<html>
    <head>
        <title>HTML Tutorial</title>
        
    </head>
    <body>
        <div class="code" id="text">
            <xmp>
                        <!DOCTYPE html>
                        <html>
                            <head>
                                <title>HTML Tutorial</title>
                            </head>
                            <body>
                                This is a simple HTML page
                            </body>
                        </html>
            </xmp>            
        </div>
    </body>
</html>

或者您可以使用像

这样的negetive margin

xmp{margin:-15px;}

Answer 4

xmp {
    margin-top: -15px;
    margin-bottom: -15px;
}

如何从div的顶部和底部删除多余的空间

4 个答案: