Блог

Главная - Вопросы по программированию - Как мне удалить или изменить пробелы между изображениями во встроенном заголовке в CSS?

Как мне удалить или изменить пробелы между изображениями во встроенном заголовке в CSS?

#html #css

#HTML #css

Вопрос:

Вот мой код. Я еще не закончил форматирование чего-либо под заголовком. Но я пытаюсь получить h2 (тот, который с изображениями) по центру и без пробелов. Я пытался возиться с пробелами шрифтов в родительском и удалять отступы, но, похоже, ничего не работает. Я хочу сделать это только в CSS.

Код:

 body {
  background-color: blue;
}
div {
  background-color: white;
  padding: 25px;
}
h1 {
  text-align: center;
}
h2 img {
  display: inline;
  height: 100px;
  margin-left: 100px;
}  
 <body>
  <div>
    <h1>
        Float, Float, Float!
    </h1>
    <div class="nospace">
      <h2>
        <img src="dragon_float.jpg">
        <img src="rootbeer_float.jpg">
        <img src="dog_tubing.jpg">
        <img src="money.jpg">
       </h2>
    </div>
  </div>
</body>

Комментарии:

1. попробуйте h2 { display: table; text-align: center; margin: auto; } удалить margin for h2 img в своем коде… добавит это в качестве ответа, если это то, что вы ожидаете… Спасибо!

Ответ №1:

Похоже, небольшая настройка даст то, что вы хотите.

Во-первых, между изображениями есть пробелы, потому что вы помещаете пробелы между изображениями. Любые пробелы между элементами HTML будут отображаться как пробел, поэтому удалите разрывы строк:

<img src="dragon_float.jpg"><img src="rootbeer_float.jpg"><img src="dog_tubing.jpg"><img src="money.jpg">

Во-вторых, добавьте h2 стиль, который находится по центру, и удалите левое поле на h2 :

 h1, h2 {
    text-align: center;
}

h2 img {
    display: inline;
    height: 100px;
    //margin-left:100px;
}

Это все, что нужно.

Ответ №2:

Возможно, использовать:

   h2 img {
    display: inline-block; 
    float: left;
    height: 100px;
    margin-left:100px;
  }