Warum Anchor-Tags nicht die Höhe und Breite des enthaltenen Elements übernehmen

Hier ist mein JsFiddle
wenn ich überprüfen Sie die Größe der Anker-tag, die chrome developer tools zeigt er mir 144px*18px für 1. element und 310px*18px für 2. element.

Möchte ich wissen, warum es sich nicht nehmen, die Höhe und Breite des enthaltenden Elements und wie es berechnet wird.

HTML

 <div class="gallery">
 <a href="#"> <img class="normal" src=""> </a>
 <a href="#"> <img class="wide" src=""> </a>
 </div>

CSS

.gallery {
background-color: #abcdef;
}
.gallery img {
display: inline-block;
margin-left: 20px;
margin-top: 20px;
}
.normal {
height: 160px;
width: 110px;
border: 5px solid black;
}
.wide {
height: 160px;
width: 280px;
border: 5px solid black;
}

InformationsquelleAutor der Frage Shubendra | 2013-09-03

  1. 33

    Den CSS 2.1 spec sagt

    Die Abmessungen des Inhaltsbereichs der box — der Inhalt Breite und
    Inhalt in der Höhe von mehreren Faktoren abhängig: ob das element
    die Generierung der box hat 'width' oder 'height' - Eigenschaft festgelegt werden, ob
    die box enthält text oder andere Boxen, ob die box ist eine Tabelle, etc.
    Box-breiten und-Höhen sind besprochen in dem Kapitel über visual
    formatting model details.

    Den <a> element standardmäßig eine Anzeige Wert inline. Seine Inhalte beteiligen, die in das layout, so ist es eine non-replaced element.

    In der Höhe, die spec sagt:

    10.6.1 Inline, nicht-ersetzte Elemente

    Die 'height' - Eigenschaft nicht gelten. Die Höhe des content-Bereich
    sollte auf der Grundlage der Schrift, aber diese Spezifikation nicht angeben
    wie.

    So 18px ist angekommen aus einer einzigen Zeile text, entnommen aus der font-Metriken. Weder das größere Bild Inhalt, noch die mit Blockgröße spielt.

    Für die Breite, die spec sagt

    10.3.1 Inline, nicht-ersetzte Elemente

    Die 'width' - Eigenschaft nicht gelten. Ein berechneter Wert von 'auto' für 'margin-left' oder 'margin-right' wird ein Wert von '0'.

    in anderen Worten, die Breite ist bestimmt durch die <a> Inhalt des Elements, Polstern, Rahmen und Ränder.

    Für die ersten <a> element, das 114px (Inhalt - Bild plus ein Leerzeichen) + 20px (linken Rand) + 2x5px (linke und Rechte Grenze) = 144px

    Für die zweite <a> element, das 280px (Inhalt - Bild) + 20px (linken Rand) + 2x5px (linke und Rechte Grenze) = 310px

    Brauchen nur zu berücksichtigen, für die Räume. Die Elemente werden festgelegt, die in eine line-box im inline-Kontext, so dass die Leerzeichen am Anfang der ersten <a> element und am Ende der zweiten <a> element verworfen werden. Die Leerzeichen am Ende der ersten <a> element und dem Beginn des zweiten <a> element sind zusammengebrochen in einem Raum. Wenn die Räume sind eingestürzt, es ist immer der erste Raum, der bleibt, in diesem Fall ist das am Ende des ersten <a> element, so dass ist, warum ein Raum, beteiligt sich an der Breite der ersten <a> element, nicht aber in der Breite von der zweiten.

    InformationsquelleAutor der Antwort Alohci

  2. 39

    verwenden display:inline-block im Anker

    .gallery a{
    display:inline-block;
}

    hier aktualisiert jsFiddle-Datei

    auch entfernen-Marge von Bild und fügen Sie es zu verankern

    .gallery a{
    display: inline-block;
    margin-left: 20px;
    margin-top: 20px;
}

    InformationsquelleAutor der Antwort Roy Sonasish

  3. 5

    anchor ist immer display: inline standardmäßig. Um anchor dauerte es Kind Raum, Sie müssen ihm eine display:block oder in diesem Fall display:inline-block so dass Sie inlineund block.

    a{
    display:inline-block;
}

    JSFiddle

    Lesen Sie diese Frage für mehr info.

    InformationsquelleAutor der Antwort Vucko

  4. 4

    Den einen tag, die müssen gestylt werden als auch

    Fügte ich

    .gallery a {
display: inline-block;
}

    InformationsquelleAutor der Antwort Anagio

  5. 0

    Anstelle der Anwendung {display: inline-block} auf <a>
    versuchen Sie die Anwendung {float: left} auf der Kind <a>. Die Höhe des <a> würde jetzt passen Sie die Höhe des Kindes.

    InformationsquelleAutor der Antwort Prashant Nair

Schreibe einen Kommentar