Ergebnis 1 bis 4 von 4

Thema: Checkbox in der Tabelle mittig machen; Problem mit margin, padding und font-size

  1. #1
    Der ohne Avatar
    Registriert seit
    Jul 2013
    Beiträge
    953
    ngb:news Artikel
    1

    Checkbox in der Tabelle mittig machen; Problem mit margin, padding und font-size

    Ich möchte in einer Tabelle eine Checkbox machen. Sieht dann so aus:
    Code (HTML5):
    1. <!doctype html>
    2. <meta charset="utf-8">
    3. <title>Test</title>
    4. <link type="text/css" rel="stylesheet" href="style.css">
    5.  
    6. <form action="#" method="post">
    7.     <table border="1">
    8.         <tr>
    9.             <td><input type="checkbox" name="test"></td>
    10.             <td>Test</td>
    11.         </tr>
    12.     </table>
    13. </form>
    14.  
    15. </body>
    16. </html>
    Code (CSS):
    1. @charset "utf-8";
    2. /* CSS Document */
    3.  
    4. * {
    5.     /* Außenabstand zum Browserrand */
    6.     margin:0;
    7.     /* Innenabstand zum Browserrand */
    8.     padding:0;
    9. }
    Bis dahin sieht noch alles gut aus
    Name:  table_checkbox_2.png
Hits: 103
Größe:  407 Bytes

    Wenn ich nun die CSS-Datei wie folgt abändere
    Code (CSS):
    1. @charset "utf-8";
    2. /* CSS Document */
    3.  
    4. * {
    5.     /* Außenabstand zum Browserrand */
    6.     margin:0;
    7.     /* Innenabstand zum Browserrand */
    8.     padding:0;
    9.     /* Schriftgröe */
    10.     font-size:12px;
    11. }
    sieht das Ganze plötzlich so aus:
    Name:  table_checkbox_3.png
Hits: 105
Größe:  493 Bytes

    Wenn ich nun
    Code (CSS):
    1.     /* Außenabstand zum Browserrand */
    2.     margin:0;
    3.     /* Innenabstand zum Browserrand */
    4.     padding:0;
    entferne ist alles wieder gut. Ich verstehe zum Einen die Zusammenhänge nicht und zum Anderen weiß ich nicht, wie ich dem Problem begegnen kann.
    Ich bitte daher um Hilfe.

  2. #2

    Re: Checkbox in der Tabelle mittig machen; Problem mit margin, padding und font-size

    *{} ist der Universal Selector, der gilt für alle Elemente. Wenn du mit *{} den margin entfernst, dann eben für alle Elemente.
    Du kannst dir in den DevTools deines Browsers den UserAgentStylesheet ansehen. Bei mir (Chromium MacOS) hat eine Checkbox.

    Code (CSS):
    1.  
    2. input[type="radio" i],
    3. input[type="checkbox" i] {
    4.     background-color: initial;
    5.     cursor: default;
    6.     margin: 3px 0.5ex;
    7.     padding: initial;
    8.     border: initial;
    9. }
    10.  
    Für diesen Beitrag bedankt sich Cyperfriend

  3. #3
    ★★★★☆ (Kasparski) Avatar von Jester
    Registriert seit
    Dec 2014
    Ort
    Code Azure
    Beiträge
    823
    ngb:news Artikel
    2

    Re: Checkbox in der Tabelle mittig machen; Problem mit margin, padding und font-size

    @Cyperfriend: Hier kommen mehrere Punkte zusammen, die eigentliche Ursache ist die line-height, also die definierte Zeilenhöhe. Ohne die 12px-Festlegung ist der Standard je nach Browser 12pt und die Zeilenhöhe 125-130% der font-size, also mit freiem Raum über und unter der Schrift.

    In der Standard-Textgröße ist der leere Raum über der Schriftoberkante so hoch, dass die Tabellenzelle die Checkbox vertikal positionieren kann, der freie Raum der Zeilenhöhe über der Schrift dehnt also die Zellen nach oben aus.

    Du kannst das lösen, indem Du der TD eine line-height zuweist, mit der es klappt, Standard wären 14 oder 15px bei 12px Schriftgröße - oder als dirty workaround einfach line-height:0 festlegen, so lange das nicht mit mehrzeiligem Text kollidiert.

    Nun wird sich Dir direkt die nächste Frage stellen: woher kommt der leere Raum unter Checkbox und Text?
    Das liegt daran, dass die Checkbox ein Inline-Element ist und eine Tabellenzelle als vertikale Basis-Ausrichtung 'baseline' hat - der entstehende Raum ist grundsätzlich für Textunterlängen gedacht. Gib ihr display:block und der Abstand nach unten ist weg.
    Für diesen Beitrag bedankt sich Cyperfriend
    Die Welt ist grau. Und bunt!

  4. #4
    SYS64738

    Moderator

    Avatar von thom53281
    Registriert seit
    Jul 2013
    Beiträge
    4.112
    ngb:news Artikel
    43

    Re: Checkbox in der Tabelle mittig machen; Problem mit margin, padding und font-size

    Zitat Zitat von KingJamez Beitrag anzeigen
    *{} ist der Universal Selector, der gilt für alle Elemente. Wenn du mit *{} den margin entfernst, dann eben für alle Elemente.
    So ist es. Deswegen würde ich das auch eher vermeiden wollen. Würde daher eher margin/padding auf html/body bzw. vorhandene Elemente anwenden. Auch wenn das ein wenig mehr Aufwand ist.

    Ansonsten vielleicht noch eine Idee (das CSS-Schnippsel weiter unten, nicht das HTML-Attribut):
    https://www.w3schools.com/tags/att_td_valign.asp

    Kann das aber aktuell nicht mit dem obigen Beispiel ausprobieren.

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •