---
title: "Bild mit Rahmen"
url: "https://www.typo3.net/d/120255-bild-mit-rahmen"
source: "typo3.net"
tags: ["Allgemein","Frage"]
created: "2015-05-23"
last_reply: "2015-10-26"
replies: 2
solved: false
page: 1
pages: 1
lang: "de"
---

# Bild mit Rahmen

Allgemein · 2 Antworten · gestartet 2015-05-23

## Eröffnungsbeitrag

**sunlite** · 2015-05-23 · [Beitrag #1](https://www.typo3.net/d/120255-bild-mit-rahmen/1)

Hallo alle zusammen,

laufe irgendwie im Moment nicht rund mit HTML und CSS. Die ganz einfachen Basis-Sachen laufen nicht mehr und ich verstehe nicht warum. Ich wollte ein Bild ganz einfach mit einem Rahmen der 3px von den Bildrändern entfernt ist und habe Folgendes:

HTML:
<div class="rahmen"><img src="test.jpg" alt="not working" width="100%"></div>

CSS:
.rahmen{

    width: 12%;
    border-style:solid;
    border-width:1px;
    border-color:#dddddd;
    padding:3px;
}

Es funktioniert zwar, allerdings ist der Abstand vom unteren Bildrand zum Rahmen deutlich mehr als 3px. Zumindest stellen das alle meine Browser (Firefox, Safari und Chrome) so dar. Habs sinnloserweise auch schon mit margin:0; und float, etc. versucht. Aber siehe Bild im Anhang.

Ich verstehe es nicht. Könnte das Padding künstlich auf 3px 3px 0 3px; setzen, aber warum? Danke im Vorab für Eure Hilfe.

P.S. Abstand nach unten ist sogar 6px.

[Bild: \[upl-image-preview uuid=122b0c38-2445-5cd9-b320-8fc415f5bfa5 url=https://www.typo3.net/assets/files/typo3net/1776-abstand.jpg alt=abstand.jpg thumbnail_url=https://www.typo3.net/assets/files/typo3net/1776-abstand.jpg\]](https://www.typo3.net/assets/files/typo3net/1776-abstand.jpg)

## Antworten

### [#2](https://www.typo3.net/d/120255-bild-mit-rahmen/2) · ejoo · 2015-05-25

Hallo sunlite,
Hab Deinen Code hier ausprobiert:
<http://www.w3schools.com/css/tryit.asp?filename=tryresponsive_image2>
und er funktioniert tatsächlich auch dort so, wie bei Dir.

Wenn Du aber die border-styles auf das img-tag beziehst, dann funktioniert es:

```html
<div><img class="rahmen" src="test.jpg" alt="not working"></div>
```

```css
.rahmen{

width: 12%;
height: auto;
border-style:solid;
border-width:1px;
border-color:#dddddd; 
padding:3px;
}
```

Width für das Bild musst Du dann nicht direkt setzen, im CSS ist das height:auto notwendig.

LG Ejoo

### [#3](https://www.typo3.net/d/120255-bild-mit-rahmen/3) · sunlite · 2015-10-26

Hi Ejoo,

vielen Dank für die Antwort ;)

---

Quelle: „Bild mit Rahmen“, typo3.net, https://www.typo3.net/d/120255-bild-mit-rahmen
Beiträge von Mitgliedern des Forums. Bitte mit Link auf die Diskussion zitieren.