到目前为止,我所做的是:http://goo.gl/sDhLA

我应该达到的目标:http://goo.gl/tqo7m

在此先感谢html / css中的新手,感谢您的帮助。

干杯。

更新

我的错。我忘了提一下,实际上我的目标是对代码进行的主要修改最少的结果,因为有些代码我无法更改。 (在我的作业中规定)。

另一方面,学习更多的东西没有任何危害。了解有关行高,框大小等新命令的更多信息:border-box确实很有趣。

但是,我很遗憾没有出现负填充。这样可以解决左右边缘处的间隙eh吗? :O

最佳答案

看起来您需要减小容器的宽度(或增加内容的宽度)。

不过,您应该在此处发布代码,只有这样我才能确保此答案正确。

您的代码一团糟。这就是我所做的(我在cm中包含单位,因为它在打印时可以提供更好的控制,您可以更改单位)

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <title>Revisions Bookstore and Cafe</title>

    <style type="text/css">

        @font-face {
            font-family: 'ChunkFiveRegular';
            src:         url('Chunkfive-webfont.eot');
            src:         local('?'), url('Chunkfive-webfont.woff') format('woff'), url('Chunkfive-webfont.ttf') format('truetype'), url('Chunkfive-webfont.svg#webfontb5K2fJwj') format('svg');
            font-weight: normal;
            font-style:  normal;
        }
        * {
            padding: 0;
            margin: 0;
        }

        h1 {
            border:           0.1cm solid rgb(65, 105, 225);
            font-family:      ChunkFiveRegular,serif;
            background-color: rgb(189, 204, 212);
            font-size:        2em;
        }

        #card div {
            font-family:      ChunkFiveRegular,serif;
        }

        #card {
            font-family:  Verdana,serif;
            width: 15cm;
            padding: 0.2cm;
            border: 0.07cm black solid;
            margin: 1cm auto;
        }

        #card div p {
            padding: 0.2cm 0.2cm 0.2cm 0.4cm;
        }

        #card > p {
            background: black;
            color: white;
            text-align: right;
            padding: 0.1cm;
        }

    </style>

</head>

<body>
<div id="card">
    <h1>Revisions Bookstore and Cafe</h1>

    <div>
        <p class="maintext">Custom brewed coffee and hand-selected books.</p>

        <p class="maintext">Special orders are our specialty.</p>
    </div>

    <p>412 N. 25th St.<br/>Richmond, VA 23223<br/>(804) 555-2565</p>
</div>

</body>

</html>

​

关于html - 有什么办法使边框更接近 body 内容? (HTML/CSS)提供的图片,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/10371532/

10-09 15:18
查看更多