Wie kann ich den Abstand zwischen HTML-Tags entfernen?

29.11.2022, 16:08

Hier der Code

<!DOCTYPE html>

<html>

<head>

  <meta>

  <title>Rechner</title>

  <style>

    .orange:focus {

      background-color: white;

      color: #f69a06;

    }

    .gray:active {

      background-color: #666666;

    }

    .lightgray:active {

      background-color: white;

    }

    body{

      background-color: #080404;

      color: white;

      justify-content: center;

      align-content: center;

      font-family: "Astrid Grotesk Light Semi Condensed" !important;

    }

    .button, .buttonDouble {

      border: none;

      border-radius: 5.3125vh;

      font-size: 5vh;

      height: 10.625vh;

      width: 10.625vh;

      margin: 0.6vh 0.5vh;

      padding: 0px !important;

      background-color: green;

    }

    .buttonDouble {

      width: 22.75vh;

    }

    .gray {

      background-color: #383434;

      color: white;

    }

    .orange {

      background-color: #f69a06;

      color: white;

    }

    .lightgray {

      background-color: #9f9f9f;

      color: black;

    }

    .numbers {

      display: flex;

      justify-content: flex-end;

      align-items: flex-end;

      color: white;

      font-family: "Astrid Grotesk Light Semi Condensed" !important;

      margin-bottom: 3.75vh;

      padding-right: 0;

      height: 31.25vh;

      width: 47vh;

      font-size: 15vh;

    }

  </style>

</head>

<body>

  <div class="div">

    <p class="numbers" id="sum" style="font-size: 122.967px;">0</p>

    <button class="button AC lightgray" id="ac">AC</button>

    <button class="button minus lightgray">+/-</button>

    <button class="button pr lightgray">%</button>

    <button class="button di orange" id="div">/</button>

    <button class="button 7 gray">7</button>

    <button class="button 8 gray">8</button>

    <button class="button 9 gray">9</button>

    <button class="button mu orange" id="mul">x</button>

    <button class="button 4 gray">4</button>

    <button class="button 5 gray">5</button>

    <button class="button 6 gray">6</button>

    <button class="button su orange" id="sub">-</button>

    <button class="button 1 gray">1</button>

    <button class="button 2 gray">2</button>

    <button class="button 3 gray">3</button>

    <button class="button ad orange" id="add">+</button>

    <button class="buttonDouble button 0 gray">0</button>

    <button class="button ko gray">.</button>

    <button class="button gl orange">= </button>

  </div>

</body>

</html>

3 Antworten

Vom Fragesteller als hilfreich ausgezeichnet
regex9
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
Programm, HTML, Webseite
29.11.2022, 19:49

All deine Buttons sind jeweils durch einen Zeilenumbruch getrennt, der wiederum (neben dem margin in der CSS-Regel mit dem Selektor button) den Abstand erzeugt.

Ein paar Lösungsmöglichkeiten:

a) Du schreibst alle Buttons hintereinander weg.

<button>...</button><button>...</button><button>...</button><!-- etc. ... -->

b) Du ordnest alle Buttons mit float.

.button,
.buttonDouble {
  float: left;
  /* ... */
}

c) Du verwendest eine Flexbox.

HTML:

<div class="buttons">
  <button>...</button>
  <!-- etc. ... -->
</div>

CSS:

.buttons {
  display: flex;
}

Abstände zwischen Buttons würde ich in dem Fall mit dem column-gap-Property setzen.

d) Das nutzt ein Grid. Mit dem lässt sich vor allem das typische Layout für einen Taschenrechner leicht umsetzen.
Neugierig1971
29.11.2022, 15:58

Ohne den kompletten Code zu kennen, ist es etwas schwierig, was dazu zu sagen.

Du kannst aber mal mit der rechten Maustaste auf das Element gehen und dann auf "Element untersuchen". Dann findest Du alls CSS-Einstellungen, die für das Element gelten und auch woher die vererbt sind.
Roberxhtmlxcss
21.01.2023, 16:46

Also du hast außer das ein paar fehler im Code 1. Du solltest am besten dein Css code in eine eigene datei machen. 2. Buttons zu benutzen für ein Taschenrechner kann man nicht so gut benutzen ich habe mal ein beispiel wie ich das gemacht habe

<!DOCTYPE html>
<html lang="en">


<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Taschenrober</title>
    <link rel="preconnect" href="https://fonts.googleapis.com"> 
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <link rel="manifest" href="manifest.webmanifest">


    <style>
 body {
    font-family: 'Montserrat', sans-serif;
    margin: 0%;
 }
table {
width: 100%;
height: 70vh;
color: white;
background-color: rgb(25, 25, 25);


}


td {
width: 25%;
text-align: center;
background-color: rgb(20, 20, 20);
font-size: 24px;
}


td:hover {
background-color: rgb(30 ,30 ,30);
cursor: pointer;
;
}


#result-area {
height: 30vh;
background-color: rgb(40, 40, 40);
color: white;
font-size: 48px;
display: flex;
justify-content: flex-end;
align-items: flex-end;
padding: 24px;
box-sizing: border-box;
}
#result {
background-color: rgb(67, 55, 236);
}
#result:hover {
background-color: rgb(110, 101, 235);
}
.highlight {
background-color: rgb(25, 25, 25);
}


    </style>





    <script>
        function appendOperation(operation){
            document.getElementById('result-area').innerHTML += operation;
        }
        function calculate() {
            let container = document.getElementById('result-area');
            let result = eval(container.innerHTML);
            container.innerHTML = result;
        }
       function deletelast() {
        let container = document.getElementById('result-area');
        if(container.innerHTML.endsWith(' ')){


       } else{
        container.innerHTML = container.innerHTML.slice(0, -3);
       }
    }
    </script>




</head> 


<body> 


<div id="result-area">
    
</div>


   <table>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td onclick="deletelast()">Löschen</td>
    </tr>
    <tr>
        <td onclick="appendOperation(7)">7</td>
        <td onclick="appendOperation(8)">8</td>
        <td onclick="appendOperation(9)">9</td>
        <td onclick="appendOperation('/')"class="highlight">/</td>
    </tr>


    <tr>
        <td onclick="appendOperation(4)">4</td>
        <td onclick="appendOperation(5)">5</td>
        <td onclick="appendOperation(6)">6</td>
        <td onclick="appendOperation('*')" class="highlight" >x</td>
    </tr>


    <tr>
        <td onclick="appendOperation(1)">1</td>
        <td onclick="appendOperation(2)">2</td>
        <td onclick="appendOperation(3)">3</td>
        <td onclick="appendOperation('+')" class="highlight">+</td>
    </tr>


    <tr>
        <td onclick="appendOperation(0)">0</td>
        <td onclick="appendOperation('.')">,</td>
        <td  onclick="calculate()" id="result">=</td>
        <td class="highlight" onclick="appendOperation('-')">-<td>
    </tr>
   </table>
</body>

/* By Rober Amjed */

ist bisschen länger her der code aber klappt noch du sollst ihn jetzt nicht kopieren meine ich aber solche elemte sind besser als buttons mit buttons bekommst du meistens mehr probleme als mit td und tr also bei mir war es so. Versuch es mal mit 

display: flex;

Ich hoffe ich konnte dir Weiterhelfen.

Woher ich das weiß:eigene Erfahrung