css - 理解 css 高度和边距

Question

我是 CSS 新手，需要您的指导。我有一个图像背景，需要在其中放置 2 条测试线。文本和图像顶部边框之间的顶部距离应为 50 像素。在这段文字的下面还有另一段文字。这两个文本之间的距离是 10px。第二个文本(下方文本)与图像下端之间的距离应为 40 像素。我想出了下面的代码。我是否需要将头等舱的高度硬编码为 100px？如果我这样做，这两个文本就会变得太拥挤。请让我知道下面的代码是否正确

HTML

<div class="header1">
    <div class="header2" >
        The first text goes here
    </div>
    <div class ="header3">
        The second small tesxt goes here
    </div>
</div>

CSS

.header1{
    display: block;
    background-image: url("1.jpg");
    background-repeat:no-repeat;  
}
.header2{
    font-family: Arial;
    font-size:42px;
    color:#FFFFFF;
    height:50px;
    margin-top:50px;
    margin-left: 170px;
    margin-bottom:10px;
}
.header3{
    font-family: Arial;
    font-size:16px;
    color:#FFFFFF;
    height:40px;
    margin-left: 170px;
    margin-top:10px;
    margin-bottom:40px;
}

Answer 1

如果内容比标题恰好 100 像素高更重要，则不需要对高度进行硬编码，或者实际上在这里使用任何高度。

看看这个使用下面 CSS 的 fiddle 。我认为这符合您的要求:http://jsfiddle.net/2LetS/4/

body { color: #ffffff; font-family: Arial; font-size: 16px; }

.header1 { 
    background: #ff0000; /* Replace this with your image. */
    padding: 50px 0 40px 170px;
}

.header2 { 
    margin: 0 0 10px 0; 
    font-size: 42px;
}

• 标题顶部和第一个文本之间 50 像素
• 第一个和第二个文本之间 10px
• 第二个文本和标题底部之间的 40px

请注意，在示例中，我在 .header1 元素上使用填充来定义文本周围的空间，并使用边距来分隔文本元素本身。您还会注意到实现相同目的的 CSS 代码要少得多。

对于您的个人发展，我认为了解盒模型，以及边距、填充、宽度和高度对 block 和内联元素的影响，将极大地提高您对 future 的了解。

希望对您有所帮助!