CSS - 标题徽标

Question

我正在制作一个包含HTML和CSS的网页。我的问题是标题出现在我向左插入的小徽标的顶部。我想将标题向右移动一段距离标志。我怎么能这样做？

h1 { 
    font-family: "Arial" ; 
    color: #808080; 
    font-size:190%;
} 

h1 { 
    background-image: url(something.png); 
    background-size: 20px 20px; 
    background-repeat: no-repeat; 
    background-position: left ; 
    padding:1px; 
    margin:-2px; 
}

Answer 1

通过将以下样式属性应用于标题，我提出了一个简单的解决方案：

header {
    display: block;
    line-height: 4em;
    height: 120px;
    padding-left: 120px;
    background: #4466FF url('http://placehold.it/80x80/FFFFFF/444466&text=My+Logo') no-repeat 20px 20px;
    font-weight: bold;
    font-size: 2em;
}

首先，我制作了<header>一个block元素。如果这是<div>，那么您不需要设置display属性。接下来，我确定了文本的大小和重量。在确定行高（伪垂直对齐）时，这一点至关重要。添加背景图片并设置其偏移后，我将left-padding添加到<header>，将其偏移到背景徽标右侧20px。

结果如下：

上面的布局是 DEMO 。

<header>My Header</header>
<content>Lorem Ipsum</content>
<footer>Copyright 2014</footer>

body {
    width: 600px;
    margin: 0 auto;
}

header {
    display: block;
    line-height: 4em;
    height: 120px;
    padding-left: 120px;
    background: #4466FF url('http://placehold.it/80x80/FFFFFF/444466&text=My+Logo') no-repeat 20px 20px;
    font-weight: bold;
    font-size: 2em;
}

content {
    display: block;
    height: 200px;
    background: #AAAABB;
    padding: 4px;
}

footer {
    display: block;
    line-height: 4em;
    height: 60px;
    background: #223377;
    color: #FFFFFF;
    font-size: 0.75em;
    text-align: center;
}