Mit welchen tags ändert man in HTML die Position eines Bildes?

... komplette Frage anzeigen

4 Antworten

margin: Außenabstand (außerhalb der border)
padding: Innenabstand (innerhalb der border)

http://codepen.io/Minilexikon/pen/grxyeO

Oben hast du weder margin noch padding. Die beiden unteren Boxen haben beides. Du kannst damit ja einmal herumprobieren ;)

Ohne die zusätzliche CSS-Eigenschaft

box-sizing: border-box;

vergrößert sich das Element durch die padding-Angabe. Durch eine Angabe des margins "schiebt" es quasi andere Elemente von sich weg.

Ohne border ist dieser Effekt zwar nicht sichtbar, du solltest aber trotzdem darauf achten, dazwischen zu unterscheiden, da dir das sonst später (bei Änderungen) Probleme bereiten könnte.

Tipp: Bei margin kannst du negative Werte angeben, bei padding nicht (geht schon, werden aber ignoriert)

Antwort bewerten Vielen Dank für Deine Bewertung

Was du auch meinen könntest, sind floats (float:right/float:left) bzw. eine absolute Positionierung:

HTML:

<div class="img-container">
    <figure>
        <img src="" />
    </figure>
</div>

CSS:

.img-container {
    position: relative;
}

.img-container figure {
    position: absolute;
    top: 0;
    left: 0;
}

Mit den Werten top, left, right und bottom kannst du natürlich herumprobieren.

Horizontal zentrieren kannst du auch einfach via

margin: 0 auto;

Vertikal und horizontal (innerhalb Texten):

vertical-align: middle;
oder
text-align: center;

Ansonsten gibt es mit HTML5 und CSS3 nun auch die (sehr zu empfehlende) Flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Antwort bewerten Vielen Dank für Deine Bewertung

Das musst du mit CSS machen. Es gibt da das Attribut padding. Damit kannst du die Abstände in alle vier Richtungen einstellen.

 ~ Stunter

Antwort bewerten Vielen Dank für Deine Bewertung
zentriert. Es geht um margin, padding usw. 

Das klingt mir aber eher nach dem hier:

<div style="text-align: center">
    <img src="...">
</div>
Antwort bewerten Vielen Dank für Deine Bewertung

Was möchtest Du wissen?