margin: 0px auto;?

Hallo,

wisst ihr was in CSS folgende Zeile bedeutet?

margin: 0px auto;

3 Antworten

21.06.2022, 07:19

Klar. Das bedeutet, dass das Element zentriert zum Elternelement ausgerichtet ist. Also das 0px beschreibt, dass das Element vertikal keinen unsichtbaren Rand hat, aber halt links und rechts durch das "auto". Der Rand wird quasi horizontal automatisch gewählt und dadurch das Element zentriert.

Woher ich das weiß:eigene Erfahrung

DodgeRT

21.06.2022, 07:18

margin ist der außenabstand eines objektes.

https://www.w3schools.com/css/css_margin.asp

wenn du mehrere werte dahinter schreibst geht es im uhrzeigersinn: oben rechts unten links. bei zwei werten wird der erste auf oben/unten angewendet, der zweite auf links/rechts.

NackterGerd

21.06.2022, 23:21

margin-top 0px

margin-bottom 0px

margin-left auto

margin-right auto

Ich programmiere gerade eine Webseite und ich bekomme den weissen Streifen zwischen Bild und Navigation bar nicht weg (Bilder unten). Ich habe es auch mit CSS margin:0px versucht, ging aber nicht. Wisst ihr, wie ich diesen Streifen wegbekomme? Noch was: für beide Bilder unten habe ich denselben Code verwendet, aber bei der einen Seite hat es n‘ Streifen auf der anderen nicht...

habe jetzt noch ein Bild vom Code hochgeladen.

...zur Frage

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)

...zur Frage

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

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

...zur Frage

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

...zur Frage

css hover effekt geht nicht...warum?

Ich bin gerade am html/css/php lernen und bin auf ein total simples Problem gestoßen, welches ich aber bei bestem willen nicht gelöst bekomme.

Die Pseudoklasse :hover will einfach nicht tun....

Das ist die style.css.

.navigation_schrift{
    display:block;
    float:left;
    text-align: center
    font-family: courir;
    font-size:150%;
    width: 100%;height:40px;
    color: red;
    background-image: url("../images/aquabutton1.gif");
    margin: 0px 0px 3px 0px;
    text-decoration:none;
}

.navigation_schrift:hover{
    color: green;
}

und so wird das ganze aufgerufen:

Testtext

Alles andere was ich über CSS mache funktioniert einwandfrei (wenn ich es richtig gemacht habe :D)

Warum wechselt die Schriftfarbe bei mouseover nicht auf grün?

Ich habe sowohl Firefox 5.0.1 als auch IE9 versucht...

Gruß BluBb_mADe

...zur Frage

Unterschied von padding-top und margin-top?

Hey, ich lerne seit neuem HTML und CSS, und würde gerne wissen, was der Unterschied zwischen diesen beiden Elementen ist

...zur Frage

Wie kann ich mit HTML/ CSS DIV Tags bündig an den Rand anpassen?

Ich habe folgendes Problem mit Html/Css. Ich möchte gerne einen div tag auf einer Website ganz oben ansiedeln. Das einzige Problem was ich dabei habe ist, dass ich es nicht bündig hinbekomme. Zwar schließen die Div Tags untereinander bündig ab, aber jeweils am Rand der Website bleibt ein Spalt über. Mit Margin & Padding klappt es leider auch nicht. Ein Beispiel Quelltext habe ich hier:

<head>
<style type="text/css">
#do {
background-color:grey;
height: 50%;
margin:0px;
padding:0px;
border:none;
}
#di {
background-color:red;
height: 50%;
margin:0px;
padding:0px;
border:none;
}
</style>
</head>
<body>
<div id="do">
Hallo
</div>
<div id="di">
Hallo
</div>
</body>

PS: Das ist nur ein Beispiel, welches mein Problem verdeutlichen soll. Ich hoffe ihr könnt mir helfen.

...zur Frage

CSS margin verschiebt falsches element?

Hallo!

Obwohl ich schon seit einigen Jahren recht sicher in Programmiersprachen wie Java und C# bin, hab ich mich jetzt an ein Webprojekt gewagt. Ich benutze React, doch brauche natürlich auch CSS.

Jetzt habe ich folgendes Problem. Ich will hier den Titel einfach um 1em nach unten verschieben. Wie schaffe ich das? Ich habe es einfach mit

margin-top: 1em;

versucht, aber dadurch wird aus irgendeinem Grund das ganze

<div className='home'>

nach unten verschoben. Wieso?

Unten findet ihr Bilder, zum einen wie es ohne margin aussieht, dann wie es mit margin aussieht. Hier findet ihr den Code:

HTML:

<div className='home'>
    <h1>Willkommen!</h1>

</div>

CSS:

.home{
    background: #375398;
    height: 100vh;
    width: auto;
    margin-left: 250px;
}

h1{
    font-size: 3rem;
    color: white;
    margin-left: 1em;
    /*margin-top: 1em*/
    }

...zur Frage

Wieso funktioniert margin-left, aber margin-right nicht?

Im CSS-Dokument

...zur Frage

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 :-)

...zur Frage

CSS: Zwei Bilder nebeneinander zentrieren?

Hallo ich habe eine Seite gebastelt möchte zwei Bilder nebeneinder zentriert anordnen. Wie mache ich das?

Code html

<footer>
<img class = "social" src="facebook.png">
<img class = "social" src="twitter.png">
</footer>

Css

img.social {
float: middle;
display: block;
margin: auto;
width: 5%;
height: 5%;
}

...zur Frage

Bild im HTML/CSS verrutscht seitlich?

Hallo,

ich versuche ein Bild in voller Breite auf einer Webseite darzustellen, es soll dabei einen dunklen Farbverlauf unter sich haben.

Da sich die Seitengröße / das Bildschirm-Seitenverhältnis auch mal ändern kann, soll das "Dunkle" auch hinter dem Bild sein.

Nun wollte ich den Farbverlauf mit einem box-shadow abbilden und der ist am Rand eben um die Box und nicht gerade runter.

Also habe ich mir diesen Code hier ausgedacht:

<html>
<head>
<style>


#example {
    box-shadow: 0px 3vh 3vh rgba(0, 0, 0, 0.5);
    /*box-shadow: 0px 3vh 3vh rgba(0, 0, 0, 0.5), 0px -3vh 3vh rgba(0, 0, 0, 0.5); oben auch Schatten*/
    margin-left: -10vw;
    margin-right: -10vw;
    margin-top: 0px;
    margin-bottom: 6vh;
    padding-left: 10vw;
    padding-right: 10vw;
    padding-top: 0px;
    padding-bottom: 0px;
    boarder-left: 0px;
    boarder-right: 0px;
    boarder-top: 0px;
    boarder-bottom: 0px;
    background-color: rgba(0, 0, 0, 0.5);
    padding-bottom: 2vh;
    left: 0px;
}
</style>
</head>
<body>
<div id="example">
    <img srchttps://thumbs.dreamstime.com/z/quadratisches-muster-38138270.jpgpg" style="width: 100vw; height: 100vw;"/>
</div>

</body>

Den kann man praktisch unter https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_box-shadow2 einsetzen und ausprobieren.

Ich hab also den Hintergrund, nebst Farbverlauf, 10% in der Breite erweitert und meinte mit dem Padding dann das Bild in die Mitte zu bekommen. Aber das klappt nicht, es landet zu weit rechts.

Woran liegt das und wie kann ich das vermeiden?

(Firefox Dev-Edition 66.0b1 (64-bit))

...zur Frage

CSS den Text über blur effekt?

Also der body soll verschwommen sein aber nicht der div

(oder nur der div Text).

Hab es schon mit z-index versucht

 <style>
        body{
            filter: blur(5px);
            position: relative;
            z-index: -10;
        }
        div{
            font-size: xx-large;
            filter: blur(0px);
            position: relative;
            z-index: 10;
        }
    </style>
</head>
<body>
    <div>
        Hallo
    </div>
</body>

...zur Frage

Display block margin 0 auto?

Kann mir jemand auf einfache Art erklären was in CSS display block macht?

Ferner was margin: 0 auto bedeutet? ich kann zwar sehen dass es eine Box zentriert verstehe aber einfach nicht genau was das display block bedeutete.

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen