Question

到目前为止我做了什么：http://goo.gl/sDhLA

我应该实现的目标：http://goo.gl/tqo7m

提前感谢任何帮助，html / css中的新手。

干杯。

更新

我的坏。我忘了提到我实际上是针对代码的主要编辑量最少的结果，因为有些代码我无法改变。（在我的任务中规定）。

另一方面，学习更多东西没有任何伤害。了解更多关于行高，盒大小等新命令：border-box非常有趣。

但是，我很遗憾没有出现负填充。它会解决左右边缘的间隙吗？：o

Answer 1

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

你应该在这里发布你的代码，只有这样我才能确定这个答案是正确的。

你的代码很乱。这就是我所做的（我在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>

Answer 2

好吧，我看着实现你想要的结果，所以我基本上手动将东西设置为与原始相同的宽度，但进行了一些修改（主要是设置边距和宽度），同时保持em格式。< / p>

但是新的css：

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

  h1 {
    text-align: center;

    border: 0.1em solid rgb(65,105,225);
    margin-top: 8px;
    margin-left:8px;
    margin-right:8px;
    padding: 0.25em;

    font-family: ChunkFiveRegular;
    background-color: rgb(189,204,212);
    font-weight: normal;
    font-size: 2em;
    }

  #contact {
    text-align: right;

    margin: 0 8px 8px;
    padding: 1em;
    font-family: ChunkFiveRegular;
    color: white;
    background-color: #212100;
    margin-bottom: 8px;
    }

  #box {

    margin: 0 8px;
    padding: 0.5em;
    }

  .maintext {
    text-align: left;
    }

  #body {
  font-family: Verdana;
  border: 0.07cm solid black;
  margin: 2.5em;
  margin-left: 23em;
  margin-right: 4em;
  width: 33.4em;

  }

</style>

Answer 3

我更新了你的jsfiddle：http://jsfiddle.net/BramVanroy/LGFLB/1/

提示：不要使用ID'body'（或任何html标签作为ID）！这让人很困惑！只需使用body即可轻松定位身体。

我保留了您建议的HTML结构。我改变了很多CSS。特别是宽度，边距和尺寸。另请注意box-sizing！

body {
  font-family: Verdana;
  border: 0.07cm solid black;
  margin: 2.5em;
  margin-left: 17em;
  margin-right: 4em;
  width: 45em;
}

h1 {
  text-align: center;
  border: 0.1em solid rgb(65,105,225);
  width: 96%;
  margin: 0.2em auto;
  padding: 0.25em;
  font-family: Rockwell;
    font-weight: bold;
    letter-spacing: 2px;
  background-color: rgb(189,204,212);
  font-weight: normal;
  font-size: 2.5em;

    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

#contact {
  text-align: right;
  width: 96%;
  margin: 1em auto 0;
  padding: 0.25em;
  font-family: Rockwell;
  color: white;
  background-color: #212100;
  margin-bottom: 8px;
}

#box {
  width: 92%;
  margin: 0 auto;
  padding: 0.5em;
  line-height: 2;
}

.maintext {
  text-align: left;
}

有什么办法让边框更贴近身体内容？（HTML / CSS）提供的图片

3 个答案:

有什么办法让边框更贴近身体内容？ （HTML / CSS）提供的图片

3 个答案:

有什么办法让边框更贴近身体内容？（HTML / CSS）提供的图片