Откуда и как убрать эти отступы между заголовком и текстом?

Question

[Ingernirated]

Всем привет!
Подскажите, почему между картинкой, заголовком и текстом есть отступы и как от него избавиться?
https://jsfiddle.net/60ktuyLd/

Answer 1

[ⓒⓢⓢ]

удалить\изменить margin

Answer 2

[Валентин]

https://jsfiddle.net/n2wz58xa/

body {margin:0;}
* {
  box-sizing: border-box;
}
.box {
  width:50%;
  background-color:coral;
}
.box-img {
  width:100%;
  display:block;
}
.box-header {
  width:100%;
  text-align:center;
  font-size:28px;
  line-height:28px;
  background-color:red;
  margin:0;
}
.box-text {
  width:100%;
   text-align:center;
  font-size:16px;
  line-height:16px;
  background-color:red;
   margin:0;
}

Comments

[Ingernirated]

спасибо!

Answer 3

[Creator]

добавить в css:
.box, .box-img, .box-header, .box-text {margin:0;}
эту же конструкцию можно представить проще:
[class*="box"] {margin:0;}
этот код убьет все отступы, но в идеале стоит подкрутить под себя, что бы небольшие отступы, но были.