Как мне удалить разрыв между элементами h1 и p? Я безуспешно пытался удалить отступы и поля. Я использую загрузочный CSS по умолчанию. Любые идеи?

.section1{
	background-color: bisque;
}

p, h1 {
  margin: 0px;
  padding: 0px;
}
<div class="section1">
    <div class="container">
    	<div class="row">
    		<div class="col-sm-12">
    			<h1 class="page-header">About</h1>
    			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, explicabo dolores ipsam aliquam inventore corrupti eveniet quisquam quod totam laudantium repudiandae obcaecati ea consectetur debitis velit facere nisi expedita vel?</p>
    		</div>
    	</div>
    </div>
</div>

Я прикрепил снимок экрана к этому сообщению, поскольку он отображается правильно, когда я запускаю код с помощью функции запуска фрагмента stackoverflows. введите описание изображения здесь

1
ffxdean 8 Янв 2017 в 18:57
У вас загружается другая таблица стилей?
 – 
Devon
8 Янв 2017 в 18:59
2
 – 
charlietfl
8 Янв 2017 в 19:00
Я собираюсь предположить, что bootstrap.css добавляет маржу к h1 из-за класса page-header. Это заменит ваш h1 в вашей таблице стилей, потому что он более конкретный. Измените свой custom.css на h1.page-header и посмотрите, что произойдет.
 – 
disinfor
8 Янв 2017 в 19:01
Прочтите о специфичности CSS: css-tricks.com/specifics-on-css-specificity
 – 
Sean
9 Янв 2017 в 18:13

4 ответа

Класс начальной загрузки page-header вызывает сброс пробела с помощью:

h1.page-header {
  margin: 0;
  padding: 0;
}

См. Демонстрацию ниже:

.section1 {
  background-color: bisque;
}
p,
h1 {
  margin: 0px;
  padding: 0px;
}
h1.page-header {
  margin: 0;
  padding: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div class="section1">
  <div class="container">
    <div class="row">
      <div class="col-sm-12">
        <h1 class="page-header">About</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, explicabo dolores ipsam aliquam inventore corrupti eveniet quisquam quod totam laudantium repudiandae obcaecati ea consectetur debitis velit facere nisi expedita vel?</p>
      </div>
    </div>
  </div>
</div>
1
kukkuz 8 Янв 2017 в 19:03

Добавьте line-height в класс h1 в вашем CSS. Если размер шрифта 26 пикселей, просто укажите высоту строки 26 пикселей.

Любить:

h1.page-header{
font-size:26px;
line-height:26px;
}
0
bulldozer 8 Янв 2017 в 19:07

Попробуйте line-height в этом

.section1 {
  background-color: bisque;
  line-height: 15px;
}
p,
h1 {
  margin: 0px;
  padding: 0px;
}
.page-header{
  margin:0 !important;
  padding:0 !important;
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="section1">
  <div class="container">
    <div class="row">
      <div class="col-sm-12">
        <h1 class="page-header">About</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, explicabo dolores ipsam aliquam inventore corrupti eveniet quisquam quod totam laudantium repudiandae obcaecati ea consectetur debitis velit facere nisi expedita vel?</p>
      </div>
    </div>
  </div>
</div>
0
Gokul P P 8 Янв 2017 в 19:07

Сначала вам нужно сбросить css. Поскольку в браузере есть формат CSS

  • {margin: 0px; padding: 0px;}

Добавьте это над вашим файлом css

-3
meebovn 8 Янв 2017 в 19:02