Mysteriöse Tabellenreihe Padding/Margin

Ich habe ein Problem, bei dem ich eine mysteriöse Auffüllung/Marge in einer Tabellenzeile sehen kann, die ich nicht benötige, aber nicht entfernen kann.Mysteriöse Tabellenreihe Padding/Margin

Bitte siehe Screenshot unten der Bereich markiert mit einem blauen Feld:

Der Code ist hier:

https://codepen.io/mattsmith/pen/GWZNVN

ich viele Dinge wie margin: 0 versucht haben, border-spacing: 0 , padding: 0 usw. Kann mir bitte jemand hier helfen? Da ich die blaue Box brauche, um mit dem Bild bündig zu sein.

Quelle

2017-03-02 Anonymous

Ein img ist ~~ein Inline-Element~~ "ersetzt Inhalte", die line-height erben wird, und Sie sehen, die line-height Abstand. Sie können es beheben, indem Sie line-height: 0; oder font-size: 0; auf dem übergeordneten Element verwenden oder display: block; oder vertical-align: top auf dem Bild festlegen.

* { 
 
    font-family: Open Sans; 
 
} 
 

 
table { 
 
    border: 1px solid #000; 
 
} 
 

 
th { 
 
    border: 1px solid red; 
 
    vertical-align: top; 
 
    font-weight: normal; 
 
} 
 

 
p { 
 
    margin: 0; 
 
} 
 
img.banner { 
 
    /* or either of these */ 
 
    /* display: block; */ 
 
    /* vertical-align: top; */ 
 
}

<body style="padding: 50px; background: #f7faf9"> 
 
<table style="border-collapse: collapse; margin: 0 auto; margin-top: 20px; width: 100%; max-width: 800px;"> 
 
    <tr> 
 
    <th><img style="float: left; width: 70px" src="http://i.imgur.com/LsRs9OY.png"></th> 
 
    <th><p style="text-align: right; font-size: 14px">February 14, 2017<br>Order <b>#4020</b></p></th> 
 
    </tr> 
 
    <tr> 
 
    <th style="padding-top: 25px; line-height: 0;" colspan="2"><img style="width: 100%" class="banner" src="https://s3.amazonaws.com/zcom-media/sites/a0i0L00000QylPjQAJ/media/mediamanager/media_page_banner.jpg"></th> 
 
    </tr> 
 
    <tr> 
 
    <th style="background: #35a0c6; padding-top: 25px;" colspan="2"></th> 
 
    </tr> 
 
</table> 
 
</body>

Quelle

2017-03-02 21:01:38

ich dies nie wusste, ich nehme an, Sie jeden Tag etwas Neues zu lernen. Vielen Dank! –

Technisch ist es kein echtes Inline-Element, sondern ein ersetztes Element https://www.w3.org/TR/css3-images/. Die mitgelieferte Lösung funktioniert jedoch gut. Edit: Ich versuche wirklich nicht, dich zu stalken Michael :-) – Christoph

@Christoph Hallo wieder! :) Ich schätze das Feedback, es macht mich zu einem besseren Entwickler und SO zu einer besseren Community. Ich habe vergessen, welche Art von Element das "img" war und habe es gesehen (hier und an anderen Orten) als "inline", also ging ich einfach damit. –

Mysteriöse Tabellenreihe Padding/Margin

Antwort

Verwandte Themen