Warum funktioniert mein margin-top nicht?

Hallo liebe Leute ich habe jetzt schon vieles probiert habe ChatGPT gefragt habe Freunde gesagt habe selber nochmal alles neu geschrieben und weis nicht was falsch ist könnt ihr mir weiterhelfen?

Hier zum Problem:Also ich schreibe gerade HTML und CSS Code und verstehe nicht warum bei der letzten Zeile

Bild zum Beitrag

margin-top:200px; nicht funktioniert warum klebt das span Attribut noch immer so eng oben trotz der margin 200

2 Antworten

Vom Beitragsersteller als hilfreich ausgezeichnet

VeryBestAnswers

Nutzer, der sehr aktiv auf gutefrage ist

im Thema CSS

30.08.2023, 16:50

Ein <span> hat standardmäßig display: inline, wodurch vertikale margins keinen Effekt haben. Um einen margin zu setzen, musst du entweder ein <div> verwenden, oder die CSS Eigenschaft display setzen, z.B. auf inline-block.

Mehr Informationen auf MDN

Woher ich das weiß:Berufserfahrung – Software-Entwickler

s180025

Beitragsersteller

30.08.2023, 16:53

ah okay danke du bist der erste der sich auskennt(bekommst auch hilfreichstes Antwort)nur das wunder mich weil glaube mich zu erinnern dass ich schonmal bei span margins gesetzt habe aber vielleicht irre ich mich auch weil margin left und right funktionieren warum auch immer lg

VeryBestAnswers

30.08.2023, 17:00

@s180025

Ich habe gerade nochmal nachgeschaut. Bei inline-Elementen kann horizontaler margin gesetzt werden, aber kein horizontaler margin. Ich habe die Antwort bearbeitet, um das zu korrigieren.

s180025

Beitragsersteller

30.08.2023, 17:01

@VeryBestAnswers

okay ich danke dir vielmals weist du ich schaue nämlich gerade einen 6 stunden html und css Kurs nur dass hat er nicht ein einziges mal erwähnt anyways vielen dank dir bekommst hilfreichste Antwort und vielen dank nochmal lg

VeryBestAnswers

30.08.2023, 17:06

@s180025

6 Stunden reichen nicht aus, um auf jeden merkwürdigen corner case von CSS einzugehen. Ich verwende CSS regelmäßig seit etwa 7 Jahren, und habe inzwischen eine recht gute Intuition dafür, aber ich würde nicht sagen, dass ich mittlerweile alles verstehe und erklären kann.

s180025

Beitragsersteller

30.08.2023, 17:07

@VeryBestAnswers

ah okay passt ich danke dir für alles du hast mir sehr geholfen :)lg

TheQ86

Nutzer, der sehr aktiv auf gutefrage ist

im Thema CSS

30.08.2023, 16:49

Ein Style-Block gehört eigentlich in die <head> Section. Ich weiß aber nicht, ob das auch der Fehler ist. Browser tendieren dazu jeden Mist an Falschformatierung zu verzeihen.

s180025

Beitragsersteller

30.08.2023, 16:51

okay habe es jetzt gemacht aber geht immer noch nicht

Ähnliche Beiträge

External css funktioniert nicht?

Wenn ich das css in ein styletag mache funktioniert es aber sobald es in der css datei ist funktioniert es nicht mehr

.form {
    margin-top: 10px;
}
.input-field {
    margin-bottom: 10px;
}

(Mit css datei)

(Mit style tag)

...zum Beitrag

Class in css und html wird nicht angesprochen, was tun?

Ich habe eine Frage zum Thema html und css. Die class .logo lässt sich nicht ansprechen und wenn ich mit vsc versuche verschiedene "classes" anzusprechen schlägt er mir nur alte gelöschte "classes" vor. Vielleicht kann mir ja jemand bei diesem Problem helfen Danke im vorraus :)

hier ist der Code:

index.html

<!DOCTYPE html>

<html>

<head>

<title>beispiel</title>

</head>

<body>

<nav>

<li><a href="">Element 2.1</a></li>

<li><a href="">Element 3.1</a></li>

<li><a href="">Element 4.1</a></li>

<li><a href="">Element 5.1</a></li>

<li><a href="">Element 6.1</a></li>

<li><a href="">Element 7.1</a></li>

<li><a href="">Element 8.1</a></li>

</ul>

<li><a href="">Element 1</a></li>

<li><a href="">Element 2</a></li>

<li><a href="">Element 3</a></li>

<li><a href="">Element 4</a></li>

<li><a href="">Element 5</a></li>

<li><a href="">Element 6</a></li>

<li><a href="">Element 7</a></li>

<li><a href="">Element 8</a></li>

</ul>

</nav>

</body>

</html>

style.css

* {

margin: 0;

padding: 0;

}

html {

height: 100%;

}

body {

background-color: rgb(214, 214, 214);

}

nav {

width: 100%;

}

.leftnav {

float: left;

list-style: none;

background-color: cadetblue;

}

.topnav {

width: 100%;

float: right;

list-style: none;

background-color: crimson;

margin-bottom: 0;

}

nav .leftnav li {

margin-left: 25px;

margin-top: 30px;

margin-right: 25px;

margin-bottom: 30px;

}

nav .topnav li {

float: right;

display: inline-block;

margin-right: 50px;

margin-top: 20px;

margin-bottom: 20px;

}

nav .topnav .firstlielement {

display: inline-block;

margin-right: 50px;

margin-top: 20px;

margin-bottom: 20px;

}

nav .topnav li a {

text-decoration: none;

color: white;

}

nav .leftnav li a {

color: rgb(50, 60, 197);

text-decoration: none;

}

nav .leftnav li a:hover {

color: rgb(173, 174, 196);

text-decoration: none;

}

nav .topnav li a:hover {

color: rgb(81, 253, 1);

text-decoration: none;

}

.logo {

}

...zum Beitrag

Abstand nach oben entfernen <CSS>?

Hallo,

ich möchte den Abstand oben entfernen. Es funktioniert einfach nicht, egal was ich mache.

HTML:

<!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>Index</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
<div class="box">
    <H1>Willkommen auf meiner Webseite</H1>
</div>
    <script>
        function myFunction() {
           var element = document.body;
           element.classList.toggle("dark-mode");
        }
        </script>
        <button onclick="myFunction()">Toggle dark mode</button>
</body>
</html>

CSS:

body {
  padding: 0%;
  margin: 0%;
  background-color: white;
  color: black;
  font-size: 25px;
  width: 100%;
  height: 100%;
  
}
.dark-mode {
  background-color: black;
  color: white;
}
.box{
  justify-content: center;
  padding: 0%;
  margin: 0%;
  padding-top: 0%;
  margin-top: 0%;
  background-repeat: no-repeat;
  width: 100%;
  height: 6cm;
  background-image: url(img/web-1012467_1920\ \(1\).jpg);
}

Das wäre der Code, ich hoffe irgendwer kann mir helfen.

So sieht es aus:

Danke im voraus.

...zum Beitrag

Wie vergößere ich in diesem Code den Abstand zwischen den beiden Span-Tags um 10px? ("Ich bin ein Span-Tag" und "Ich bin das zweite Span-Tag"?

Hallo! Ich bin an einer Aufgabe für eine Hausübung und verzweifel hier etwas. Ich habe hier ein großes Problem, genau diesen einen Abstand zu ändern, da ich nicht weiß, wie man den Span-Tag angeben soll, um diesen zu ändern.

Mein Ansatz wäre gewesen:

.wrapper span {

margin-bottom: 10px;

} aber das funktioniert nicht und ich komme nicht hinter, warum.

Der Code:

<div class="wrapper"><p>Ich bin das zweite P-Tag</p></div>

<p>Ich bin das dritte P-Tag</p>

<br />

<span>Ich bin das zweite Span-Tag</span>

<div>

<p>Ich bin das vierte P-Tag</p>

<p>Ich bin das fünfte P-Tag</p>

</div>

</div>

<ul>

<li>Erstes Element der Liste</li>

<li>Zweites Element der Liste</li>

<li>Drittes Element der Liste</li>

<li>Viertes Element der Liste</li>

</ul>

</div>

</body>

...zum Beitrag

HTML CSS bild verschieben funktioniert nicht?

Hey,
Ich möchte gerne das eine Bild nach links oben verschieben, nur weiß ich nicht wie. Hab auch schon padding, margin und align-item versucht nix hat funktioniert-_-.

schonmal danke im vorraus
Liebe Grüße
Lucas

...zum Beitrag

margin: 0px auto;?

Hallo,

wisst ihr was in CSS folgende Zeile bedeutet?

margin: 0px auto;

...zum Beitrag

Wie kann man eine Webseite (HTML/CSS/JS) in WordPress einbinden (unverändert dort einsetzen)?

Kurze Frage,

Ich habe eine Webseite mit HTML/CSS und JS erstellt und möchte diese jetzt bei WordPress einfügen, damit andere, die keine Ahnung von HTML haben diese auch gut bearbeiten können. Funktioniert es vielleicht, einfach die Dateien die man hat hochzuladen? Ich beschäftige mich jetzt schon seit Tagen und komme nicht voran... Ich bin am verzweifeln. Ich würde mich über jede Hilfe freuen.

...zum Beitrag

Abstand zwischen zwei Div-Containern verhindern HTML?

Ich habe zwei Div-Container mit display: inline-block; padding: 0; margin: 0; aber es befindet sich trotzdem ein Abstand zwischen ihnen. Woran liegt das?

hoffe auf Hilfe,

Bohne47

...zum Beitrag

HTML+CSS: Wie bekomme ich Text Zentriert in einem Inline-Flex?

Folgender jsfiddle:

https://jsfiddle.net/t38zjxow/

CSS:

div {
  display:flex;
}

span {
  background:#0f0;
  display:inline-flex;
  width:10em;
  margin:1em;
  text-align:center;
}

HTML:

<div>
  <span>test1</span>
  <span>test2</span>
</div>

Wie bekomme ich die beiden Texte zentriert?

...zum Beitrag

Wie kann ich ein Foto in einer CSS oben links in die Ecke machen?

Moin, ich möchte ein Bild in meiner CSS oben links in die Ecke machen, damit das auf jeder Seite so ist.

Der Code für meine HTML:

<!doctype html>
<html>
<head>
<title>Informatik</title>
<link href="Kurz.css" rel="stylesheet" type="text/css">
</head>
<body>
<footer></footer>
<script language="javascript" type="text/javascript" src="Footer.js"></script>
</body>
</html>

Der Code für CSS:

html {
  height: 100%;
}
body {
 background-image: url("Bilder/getraenkeguenther.jpg");
 background-repeat: no-repeat;
 background-position: left top;
 min-height: 100%;
 margin: auto;
 display: flex;
 flex-direction: column;
}
footer {
  margin-top: auto;
  height: 200px;
  text-align: center;
background-color: deepskyblue;
}

Der Code der JS:

var footer = `
<a>Impressum</a>
`;
document.getElementsByTagName("footer")[0].innerHTML = footer;

Das backgroundimage soll quasi als einzelnes Bild oben links in die Ecke

...zum Beitrag

HTML projekt wie findet ihr die vorarbeit?

html:

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<Header>
</Header>
<div class="input">
<main>
<form action="" method="post">
<h2>Anmeldung</h2>
<input type="email" name="Email" placeholder="Email hier eingeben" required="@" id=""> <br>
<input type="text" name="Benutzer" placeholder="Benutzer hier eingeben" required="A-z" > <br>
<input type="password" name="passwort" placeholder="password hier eingeben " id=""> <br>
<input type="submit" value="Anmelden">
<input type="reset" value="reset">
</form>
</div>
<hr>
<a href="#">Impressum</a>
<a href="#">kontakt</a>
<a href="#">Über uns</a>
</main>
<footer>
</footer>
</body>
</html>

css

body {
font-family: Arial, Helvetica, sans-serif;
color: white;
}
body{
background-color: black;
}
.input {
display: flex;
margin: 700px;
margin-top: 300px;
flex-direction: column;
justify-content: center;
align-items: center;
box-shadow: 1px 1px 3px 3px white;
border-radius: 30px;
height: 300px;
width: 300px;
}
a{
font-family: Arial, Helvetica, sans-serif;
display: flex;
justify-content: center;
align-items: center;
}
a:hover{
color: green;
text-decoration-line: none;
}
input{
padding: 5px;
border-radius: 10px;
}
input[type="submit"] {
font-size: 1.0em; padding: 1px 6px;
font-family: Roboto, sans-serif;
font-weight: 100;
color: teal;
border: 1px solid silver;
background-image: linear-gradient(to top, gainsboro 0%, white 90%);
border-radius: 20px;
}
input[type="reset"] {
font-size: 1.0em; padding: 1px 6px;
font-family: Roboto, sans-serif;
font-weight: 100;
color: teal;
border: 1px solid silver;
background-image: linear-gradient(to top, gainsboro 0%, white 90%);
border-radius: 20px;
}

...zum Beitrag

HTML/ CSS Seite zentrieren und die Seitenränder anpassen?

Hallo, ich programmiere zur Übung eine Automarken-Webseite.

Ich will, dass die Buttons so sind;

Und nicht so: (Der Rahmen dient nur zur Übersicht)

Aber wenn ich die Webseite verkleinere, dann sieht so aus; ich möchte aber, dass die sich richtig anpassen, also z.B. 2 nebeneinander sind.

Welchen Befehl kann ich dafür verwenden?

Hier habe ich den Befehl verwendet: .body {

margin-left: 28%;

margin-right: 28%;

}

...zum Beitrag

Minus Padding CSS?

Ich muss eine Website mit Phase 5 HTML Editor machen und dafür brauche ich ein negatives Padding… ich habe gefühlt alles probiert und z.B. margin: -10px funktioniert aber Padding eben nicht…

Vielen Dank schon mal

...zum Beitrag

Wie kann ich den Abstand zwischen HTML-Tags entfernen?

HI, ich programmiere gerade einen Taschenrechner in HTML/CSS/JavaScript und möchte den Abstand zwischen den Elementen entfernen. Margin, Padding und Border sind bereits auf 0 gestellt. Der Abstand ist auch nur horizontal zwischen den Elementen. Vielen Dank im Voraus :-)

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen