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

26.01.2024, 09:07

Rechts ist das Original

1 Antwort

Babelfish

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

HTML, Programmieren & Softwareentwicklung, Software & Apps

26.01.2024, 10:09

Wenn der Abstand innerhalb der Box zu groß ist, dann musst du in den Entwickler-Tools deines Browser rausfinden, wer für den Abstand verantwortlich ist.

Mein Tipp: Die Absätze P haben einen zu großen margin. Ändere diesen margin und nicht den padding der Box. Ein negativer padding ist nicht möglich. Das geht nur bei margin.

PS: Mit mehr Abstand sieht es besser aus und ist besser lesbar..

Woher ich das weiß:Berufserfahrung – Entwickle Webseiten seit über 25 Jahren.

Ähnliche Beiträge

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

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

Css Elemente nebeneinander und nicht untereinander?

Wie kann ich diese Elemente so positionieren, dass sie nebeneinander und nicht untereinander sind?

HTML:

  <div>
    <div v-for="recipe in recipes" :key="recipe.id">
      <div class="recipe">
        <img class="recipe-img" :src="recipe.img" alt="" />
        <div class="recipe-description">
          <h3 class="recipe-title">{{ recipe.title }}</h3>
          <h4 class="recipe-time">
            <i class="far fa-clock"></i> {{ recipe.time }} Minutes
          </h4>
          <h4 class="level">
            <i class="far fa-check-circle"></i> {{ recipe.level }} to make
          </h4>
        </div>
      </div>
    </div>
  </div>

CSS:

.recipe-img {
  width: 300px;
  height: 300px;
  object-fit: cover;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}


.recipe {
  margin: 30px;
}


.recipe-description {
  text-align: center;
  margin-top: 10px;
  border: 1px solid #444;
  border-top: none;
  padding: 10px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  background-color: #444;
  color: white;
  width: 300px;
}


.recipe-title,
.recipe-time,
.recipe-level {
  margin: 5px;
}

...zum Beitrag

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

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

CSS: Wie kann ich die Unterlinie des Texts wegbekommen?

Hallo. Irgendwie geht die text-decoration bei mir nicht weg. Bitte helft mir.

HTML:

 <button class="cn"><a href="#">create</a></button>

CSS:

.cn {
  text-decoration: none;
  width: 160px;
  height: 40px;
  background: #23002f;
  border: none;
  margin-bottom: 10px;
  margin-left: 20px;
  font-size: 18px;
  border-radius: 10px;
  cursor: pointer;
  transition: .4s ease;
  margin-left: 350px;
  margin-top: 5px;
}

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

Hat jemand Tipps für HTML CSS und JS?

Ich bin Neueinsteiger in HTML und CSS. Habt ihr Tipps, Videos, Websites, wie ich schnell alle Funktionen etc. lernen kann. Oder eine Übersicht mit allen Begriffen von html und css, wo sie erklärt werden?

...zum Beitrag

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;
}

...zum Beitrag

HTML Seite verschiebt bei Verkleinerung?

Hallo, ich bin Anfänger was HTML und CSS angeht und habe meine erste Website fürs erste fertig. Nun bin ich beim verkleinern des Windows auf das Problem gestoßen, dass sich die Objekte verschieben und unteranderem auch Überlappen...

Wie kann ich dem entgegen steuern? Gibt es da eine Möglichkeit?

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

Custom CSS Wordpress einzelne Seiten ausschließen?

Hallo, wie kann ich das Wordpress CSS nur für einzelne Seiten einstellen. Hab schon bisschen was zusammengebastelt. Danke für eure Hilfe!

@media only screen and (max-width: 359px) {

#primary .content-container {

padding-left: 10px !important;

padding-right: 10px !important;

}

{display:none}

.postid-3701,

.postid-3712,

.postid-3731,

.postid-3736,

.postid-3748,

.postid-2583,

.postid-3756,

.postid-3752,

.postid-3703

{display:none}

}

...zum Beitrag

Website vergrößern Html/ Css?

Hallo alle zusammen,

Ich habe eine Website am Laptop mit HTML und CSS programmiert, aber wenn ich das auf dem PC öffnen möchte dann ist das Format kleiner und damit es passt muss ich die Website um 175% vergrößern im browser...

Kann ich das in HTML und CSS irgendwie reinschreiben, dass sich die seite immer automatisch in der größe ist und wenn ja wie?

Danke für eure hilfe

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

Was möchtest Du wissen?

Deinen Beitrag erstellen