Zeilenabstand h1 verringern Css?

4 Antworten

webdesignnoobie
30.08.2019, 08:56

Zusätzlich zu margin und padding könnte auch noch line-height in Frage kommen, je nachdem, was du erreichen möchtest.
Woher ich das weiß:Berufserfahrung – selbstständiger Webdesigner & Programmierer
ChiefofGame 
Fragesteller
 30.08.2019, 08:58

Damit bekomme ich den abstand größer, er wird aber nicht kleiner :/

Bei allen 3, ich habe ja auch vorher gegoogelt😂

0
webdesignnoobie  30.08.2019, 09:00
@ChiefofGame

Wenn du einen Link hast, kann ich drüber schauen.

Die richtige Kombination aus line-height und padding bzw margin funktioniert!

0
webdesignnoobie  30.08.2019, 09:18
@ChiefofGame

Drehe mal das margin von h5 runter, dann tut sich da auch was ;)
Außerdem hast du leere Absätze zwischen den Menüpunkten, mach die auch noch raus und arbeite mit Margin.

0
ChiefofGame 
Fragesteller
 30.08.2019, 09:25
@webdesignnoobie

Wieso h5? Die Absätze hab ich grad am pc weg gemacht aber ich hab do ch h1 genommen?

0
webdesignnoobie  30.08.2019, 09:26
@ChiefofGame

Ja, hast du. Jedoch ist die h1 von einem Link (a) umschlossen, welcher wiederum als Elternelement eine h5 hat.

0
webdesignnoobie  30.08.2019, 09:30
@ChiefofGame

Bitte, gerne. Wie schon erwähnt, du solltest die leeren <p></p> wegmachen. Optisches Styling wird ausschließlich mit CSS umgesetzt.

1
vagabunda  09.09.2019, 12:04
@ChiefofGame

Hallo, die leere Absätze sind immer noch zu sehen:

<div id="menu">
    <p></p>
    <h5><a href="index.html" style="text-decoration: none;">&nbsp;&nbsp;Startseite</a></h5>
    <p></p>
    <p></p>
    <h5><a href="page1.html" style="text-decoration: none;">&nbsp;&nbsp;Nachhilfe</a></h5>
    <p></p>
    <p></p>
    <h5><a href="page2.html" style="text-decoration: none;">&nbsp;&nbsp;Kontakt</a></h5>
    <p></p>
 </div>

Ebenfalls die Leerzeichen, damit sollte man nicht die Abstände regulieren, sondern mit Padding und Margin in CSS-Datei. Also leere p-Tags raus, Leerzeichen raus und die inline-Styles auch raus. Dann z.B. folgendes in der CSS Datei schreiben:

#menu h5 {padding-left: 1em;} 
#menu h5 a {text-decoration: none;}
0
regex9
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
Computer, HTML, Webseite
30.08.2019, 13:20

Das HTML-Dokument deiner Seite weist mehrere verschiedene eklatante Mängel auf.

  • Ein Doctype fehlt. Dieser ist keinesfalls optional.
  • Die Attribute link, alink und vlink sind veraltet. Entferne sie und nutze CSS stattdessen:
a:link, a:visited, a:active { color: black; }
  • Du schließt das body-Element gar nicht.
  • Ein Headline-Element (h1-h6) hat nichts innerhalb eines Paragraphen verloren.
  • Ein Headline-Element kann nicht das Kindelement eines anderen Headline-Element sein. Das ist bei dir bei jedem Navigationspunkt der Fall (h1 in h5).
  • Der Starttag für das Element mit der ID content ist unvollständig.

Des Weiteren wären folgende Änderungen besser für ein aussagestarkes, sauberes Markup:

  • Die Kennzeichnung des Navigationsbereichs mit dem nav-Tag.
  • Die Definition einer Auflistung (ul) für die Navigationspunkte.
  • Die einzelnen Navigationspunkte stellen eigentlich keine Überschriften dar. Die Schriftgröße lässt sich via CSS setzen.
  • Das strikte Trennen von CSS und HTML (Inline-Styles entfernen und stattdessen in der CSS-Datei definieren)
  • Auf HTML Entities (wie &nbsp;) verzichten und stattdessen CSS-Properties (margin, padding) setzen.
  • Entfernen des b-Tags (du kennzeichnest die Wichtigkeit der Elemente bereits durch den Headline-Tag, eine visuelle Gewichtung lässt sich via font-weight (CSS) bestimmen.
  • Der Button im Footer erfüllt nicht die Funktion eines Buttons, sondern die eines Links. Setze also einen Link (a) ein und style diesen via CSS, wenn er anders als andere Links aussehen soll. Ein anderer Workaround könnte noch ein Button mit einem role-Attribut (role="link") sein, nach Möglichkeit würde ich aber auf so etwas eher verzichten.
  • Bei deinem Kontaktformular würde ich die Formularfelder jeweils mit einem id-Attribut ausstatten, auf welches das for-Attribut der jeweiligen Labels verweisen kann. Ein Beispiel:
<label for="name">Name:</label>
<input id="name">
  • Zusätzlich (aber so weit bist du sicherlich noch nicht) wird jedes Eingabefeld ein name-Attribut benötigen, damit nach Versand des Formulars die Daten auf Backendseite mit einem Schlüssel assoziiert werden können.

Wenn du all diese Problem behoben hast, kannst du dich dem Problem mit den zu großen Abständen wieder widmen. Eigentlich sollte sich dieses in dem Zuge sogar von selbst beheben.
Tyldu
30.08.2019, 08:54 
h1 {
  margin: 0;
}

oder eine beliebige andere angabe

du kannst den abstand auch über margin-top, margin-bottom, margin-left und margin-right für jede seite anpassen. das kannst du auch alles in einer zeile machen indem du die werte mit leerzeichen hintereinander schreibst:

h1 {
  margin: 0 1px 2px 3px;
}

mehr dazu hier
Woher ich das weiß:Studium / Ausbildung – Softwareentwickler, B. Sc. Informatik
ChiefofGame 
Fragesteller
 30.08.2019, 08:57

Das habe ich auch schon probiert, leider geht es nicht :/

0
Tyldu  30.08.2019, 09:02
@ChiefofGame

dann versuchs mal mit padding. sonst liegt es an dem container in dem deine h1 drinnen ist.

0