到目前为止,我所做的是: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/