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.

3 Antworten

GamersGame

16.01.2022, 00:49

Wenn du dir mal das CSS Box Modell ansiehst: https://www.w3schools.com/css/css_boxmodel.asp

Du hast für ein Element 4 Seiten, diese werden immer nach der folgenden Reihenfolge definiert: oben, rechts, unten, links.

Ausgeschrieben bedeutet der Befehl: margin: 0 auto 0 auto also oben und unten 0px Abstand und seitlich soll der Abstand automatisch erstellt werden.

Wenn du z.B. ein Element mit 80% Breite hast wird der Abstand links und rechts auf 10% gesetzt.

Edit: margin: 0 würde bedeuten, dass alle Seiten 0 sind, also oben, rechts, unten und links.

Was display: block genau macht und welche andern displays es gibt ist in diesem Video gut erklärt: https://www.youtube.com/watch?v=Qf-wVa9y9V4

Wenn du sonst Fragen hast sind die Dokumentationen von w3schools und von developer.mozilla immer sehr gut.

Woher ich das weiß:Berufserfahrung

nparse

14.01.2022, 20:24

"margin: 0 auto" setzt das Objekt auf welches es angewendet wird in die genaue Mitte des Parent Container.

nemezzz

14.01.2022, 20:31

https://developer.mozilla.org/de/docs/Web/CSS/display

https://developer.mozilla.org/de/docs/Web/CSS/margin

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

Html css Zentrieren?

Moin, ich habe in html 4 Bilder. Darunter will ich jeweils einen Block mit Text

Wie man sieht ist ganz rechts der Block direkt unter dem Bild, das habe ich mit margin gemacht. Bei den anderen Blöcken klappt dies nur nicht mehr. Die Bilder und Blöcke sind in keinem Container oder keiner div soweit ich weiß

Danke

...zur Frage

CSS Bildgröße automatisch an div-Box anpassen

Ich bin grad bei dem Layout für meinen Onlineshop (Info-Projekt also kein echter Shop^^). Das Layout sieht bisher so aus, dass ich 2 Div-Boxen zentriert habe mittels Margin-left/right="auto". Die obere Spalte ist box ist der Header, die untere für den Inhalt. In die obere Box soll jetzt ein Schriftzug als Logo rein. Gibt es irgendeine Möglichkeit, dass das Bild automatisch an die Größe der div-Box angepasst wird? Als Größenangabe habe ich beim Header nur "width:850px" und "height: 20%". Wenn ich diese Angaben dann aber an das Bild schreibe (also dass ich in der CSS-Datei für das Bild "width="850px" etc. schreibe), funktioniert es nicht. Gibt es irgendeinen automatischen Befehl oder kann man das irgendwie ausrechnen? Danke ;)

PS: Die Auflösung des Bild ist 1500x909, falls das irgendetwas ändern würde ;)

...zur Frage

margin: 0px auto;?

Hallo,

wisst ihr was in CSS folgende Zeile bedeutet?

margin: 0px auto;

...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

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

...zur Frage

CSS: Wie kann ich Karten gleich groß anzeigen?

Guten Tag,

ich habe einen kleinen Design-Bug in meiner Webseite.

(s. Bild)

Wie kann ich dieses Problem lösen?

Mein CSS:

<style>
.item {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  width: 10%;
  border-radius: 5px;
  background: #191c29;
  color: rgb(88 199 250 / 100%);
}
.con {
  background: #adadad;
  overflow: auto;
  overflow-x: hidden;
  background: #212534;
}

.item:hover {
  box-shadow: 0 16px 32px 0 rgba(250,250,250,0.2);
}
img {
  border-radius: 5px 5px 0 0;
  height: 150px;
	width: 100%;
}
.container {
  padding: 2px 16px;
}
body {
  overflow: hidden; 
}


* {box-sizing: border-box;}


body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}




* {
  box-sizing: border-box;
}
body {
  font-family: Arial, Helvetica, sans-serif;
}
#flex-container {
   display: -webkit-flex;
   display: -ms-flex;
   display: flex;
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
}
.item {
  float: left;
 /* width: 25%; */
  width: 15%; /* 10%*/
  height: 50%; /* 50% */
  padding: 20 10px;
  margin-bottom: 20px;
  margin-left: 20px;
  margin-right: 20px;
}
.row {
  margin: 0 -5px;
}
.row:after {
  content: "";
  display: table;
  clear: both;
}
.col-sm {
  text-align: center;
}
/* @media screen and (max-width: 600px) { */
@media screen and (max-width: 800px) {
  .item {
    width: 100%;
    display: block;
    margin-bottom: 20px;
  }
}
.text-center {
  text-align: center;
}
</style>

Der Code von einer Karte:

<div class="row">
<div class="item text-center">
  <div class="col-sm">
    <img src="textures/spawner.png" alt="textures/spawner.png" style="width: auto;">
    <div class="container">
      <h4><b>Spawner (*1)</b></h4>
      <p>Preis: 10 Mio Coins</p><p></p>
    </div>
  </div>
</div>&nbsp;
<div class="item text-center">
  <div class="col-sm">
    <img src="textures/spawner.png" alt="textures/spawner.png" style="width: auto;">
    <div class="container">
      <h4><b>Spawner (*1)</b></h4>
      <p>Preis: 10 Mio Coins</p><p></p>
    </div>
  </div>
</div>&nbsp;
</div>

Danke für jede Hilfe. Ich weiß, dass der CSS-Code nicht der schönste ist, allerdings lerne ich die Sprache noch!

...zur Frage

CSS mehrere DIV Objekte in einer Linie mit gleicher Breite?

Hi an alle!

Ich habe jetzt mehrere Div-Elemente mit

display: inline-block;

in einer Linie gebracht. Wie bekomme ich diese nun dazu die gleiche Breite zu haben?

Danke im Voraus

...zur Frage

Wie kann ich Bilder in HTML bzw. CSS horizontal automatisch verteilen?

Ich möchte gern auf meiner Webseite (Schulaufgabe - die Lehrerin hat natürlich mal wieder alles genau erklärt) einige Bilder horizontal über die Breite des Feldes verteilen. Das aber nicht mit absoluten Werten sondern automatisch da wir auch responsive Design anwenden sollen - wenigstens ein klein wenig zumindest.

Nun schaffe ich es aber maximal die Abstände zwischen den Bildern mit margin einzustellen, dass diese sich automatisch verteilen funktioniert nicht wirklich, auch nicht mit auto.

Hier der Code der bisherigen Klasse für die Bilder:

.BildStartseite{
    width:150px;
    margin-left:2%;
    margin-right:2%;
}

vielleicht könnt ihr mir da ja helfen. Danke im voraus! :)

...zur Frage

Bild in div?

Hi ich möchte ein bild in mein div hinzufügen und es soll oben genau in das div passen ohne rand aber irgendwie bleibt dort immer ein weißer rand.

Hier ein stück meines Html code:

                <section class="boxes">
                    <div class="buybox">
                        <img src="blume/sonnenblume.jpg">
                    </div>
                    <div class="buybox"></div>
                    <div class="buybox"></div>
                    <div class="buybox"></div>
                </section>

Hier ein Stück von CSS:

div {
    padding: 20px;
    text-align: center;
    box-sizing: border-box;
}
.boxes{
    display: flex;
    flex direction: row;
}
.buybox{
    width: 400px;
    height: 420px;
    background: white;
    margin: 25px;
    box-shadow: 0 0 30px rgba(0, 0, 0, .2);
    border-radius: 20px;
    position: relative;
    
}
.buybox img{
    border-radius: 20px;
    height: auto ;
    width: 100% ;
    box-sizing: border-box;
    margin: 0;
}
.buybox:hover{
    transition: .2s;
    background: #E6E6E6;
}

...zur Frage

HTML Email Style wird nicht richtig gerendert?

Folgender Code:

<html>
    <body>
        <div style="font-family: arial;">
            <h1 style="color: #007bff; letter-spacing: 2px; font-weight: 500;">Neue Nachicht von der Website!</h1>
            <div>
                <h2 style="margin-top: 2rem; margin-bottom: .5rem; letter-spacing: 2px; font-weight: 500;">Kontaktdaten</h2>
                <div style="margin-right: 70px; display: inline-block;">
                    <p style="margin: .6rem 0;">Vorname:</p>
                    <p style="margin: .6rem 0;">Nachanme:</p>
                    <p style="margin: .6rem 0;">Email Adresse:</p>
                    <p style="margin: .6rem 0;">Telefonnummer:</p>
                </div>
                <div style="display: inline-block;">
                    <p style="margin: .6rem 0;">${ firstname }</p>
                    <p style="margin: .6rem 0;">${ lastname }</p>
                    <p style="margin: .6rem 0;"><a style="color: #007bff; text-decoration: none;" href="mailto:${ email }">${ email }</a></p>
                    <p style="margin: .6rem 0;">${ htmlPhone }</a></p>
                </div>
            </div>
            <div>
                <h2 style="margin-top: 3rem; margin-bottom: 1rem; letter-spacing: 2px; font-weight: 500;">${ subject }</h2>
                <div style="font-size: 17px; padding-right: 11%; max-width: 900px;">${ message }</div>
            </div>
        </div>
    </body>
</html>

Eigentlich sollten bei den Kontaktdaten 2 Divs nebeneinander sein. Funktioniert auch wenn ich die Email über gmail.com aufrufe. Aber nicht in Windows Mail etc. Woran liegt das?

...zur Frage

HTML/CSS: Floats überlappen sich beim Minimieren, wie behebt man das?

Hallo,

ich bin dabei eine kleine Website zu erstellen. (Nicht online) Dabei habe ich mit dem Responsive Webdesign Probleme. Auf dem Smartphone, Tablet, Pc sieht die Seite gut aus. Jedoch, wenn ich das Browser-Fenster kleiner verschiebe, überlappen sich Bilder mit dem Text an einer Stelle. (Der Text ist speziell in Lists unterteilt.)

Hat mir jemand einen Rat? Die Bilder sind in Div-Boxen, der CSS Code dafür sieht ungefähr so aus:

    vertical-align: top;
    margin-right: xy
    margin-top: xy
    float: right;
    width: auto;

...zur Frage

Bilder auf gleiche Höhe in HTML/CSS?

Hallo,

ich habe nochmal eine Frage zu meiner Website.

Kann mir jemand sagen, wie ich die beiden linken Bilder auf die gleiche Höhe wie das rechte Bild bringen kann? Ich finde bei Google nichts und weiß nicht weiter.

Hier der Ausschnitt meines Codes:

HTML:

<div id="bilder">
  <div id=bild1>
    <img src="bild1.jpg" alt="Wir bei der Arbeit">
  </div>
  <div id=bild2>
    <img src="bild2.jpg" alt="Wir bei der Arbeit">
  </div>
  <div id=bild3>
    <img src="bild3.png" alt="Holzschränke"
  </div>

CSS:

#bild1 {
  display: inline;
  margin-left: 500px;
}

#bild2 {
  display: inline;
  margin-left: 50px;
}

#bild3 {
  display: inline;
  margin-left: 50px;
}

...zur Frage

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 {

}

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen