Почему строка не занимает 100%?

Question

[Ingernirated]

Почему h1 не хочет занять 100% высоты?
https://jsfiddle.net/rcLzhgby/2/

Answer 1

[automatik]

Потому, что user agent stylesheet

h1 {
    display: block;
    font-size: 2em;
    -webkit-margin-before: 0.67em;
    -webkit-margin-after: 0.67em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-weight: bold;
}

Соответственно, чтобы переопределить:

.nemo {
  margin: 0; padding: 0
}

Comments

[Ingernirated]

спасибо, я извиняюсь, ещё один вопросик

.nemo:hover {
	color:white;
}
.nemo:hover + .div {
	width:100%;
	background-color:black;
}

Почему не хочет изменяться элемент .div?

[automatik]

Ingernirated:

.nemo:hover {
  color:white;
}
.div .nemo:hover {
  width:100%;
  background-color:black;
}

[automatik]

Ingernirated: Либо проще:

.nemo:hover {
  color:white;
  width:100%;
  background-color:black;
}

https://jsfiddle.net/rcLzhgby/4/

[Ingernirated]

automatik: тут меняется h1, а мне сам блок надо поменять наведением на h1

.div .nemo:hover {
  width:100%;
  background-color:black;
}

[automatik]

Ingernirated: я не совсем понял, что в итоге должно получиться

[Ingernirated]

automatik: имеем блок .div в котором h1 занимает 80% его ширины и наводя на h1 меняем .div, а h1 не меняется, но навести на h1 надо

[automatik]

Ingernirated: на чистом CSS нельзя изменить класс родителя, наведением на дочерний элемент. В данном случае вы хотите сделать именно так. Это работает лишь в каскадном порядке, то есть сверху вниз.
stackoverflow.com/questions/8114657/how-to-style-t...