Überschriften exakt linksbündig

klingelbart · 5 Februar 2015

Hallo,
ich möchte in meine Seite einen header Teil einbauen, der aus einer großen und einer kleineren Überschrift besteht. Das Problem: Sind die Überschriften unterschiedlich groß, sieht man deutlich, dass die beiden Überschriften nicht an exakt derselben Linie beginnen. Das stört mich. Ich habe dazu ein übertriebenes Minimalbeispiel gemacht, an dem man das Problem deutlich erkennen kann:

Code:

<html>
<head>
<style>
h1 {
    font-size: 200px;
}

h2 {
    font-size: 50px;
}

.site-header{
    font-family: verdana;
    background: #85E0FF;
}
</style>
</head>

<body>
     <header id="masthead" class="site-header" role="banner">
          <hgroup><h1>B</h1><h2>B</h2></hgroup>      
     </header>
</body>
</html>

Ich würde mir wünschen, dass die beiden B's genau mit dem blauen Feld anfangen. Hat jemand einen Tipp für mich?
Viele Dank!

djheke · 5 Februar 2015

Gib mal beide Überschriften ein margin:0 und padding:0

oder so

Code:

<html>
<head>
<style>
h1 {
  font-size: 200px;
  text-indent: -9px;
}
h2 {
  font-size: 50px;
  text-indent: -1px;
}
.site-header{
  font-family: verdana;
  background: #85E0FF;
}
</style>
</head>
<body>
  <header id="masthead" class="site-header" role="banner">
  <hgroup><h1>B</h1><h2>B</h2></hgroup>   
  </header>
</body>
</html>

klingelbart · 5 Februar 2015

Hi,
Vielen Dank! text-indent war genau die Anweisung, die ich gebraucht habe! Mit margin und padding bin ich dagegen nicht weitergekommen.

Überschriften exakt linksbündig

klingelbart

Neues Mitglied

djheke

Aktives Mitglied

klingelbart

Neues Mitglied

Neueste Beiträge