Блог

Главная - Вопросы по программированию - Заголовок цены в css

Заголовок цены в css

#css

Вопрос:

Я хотел бы получить этот результат ниже

введите описание изображения здесь

Я застрял в заголовке цены. На самом деле, я не понимаю, почему розовый цвет не занимает все пространство?

введите описание изображения здесь

Я думаю, что моя проблема-это мои отступы и наценка на мой ценовой товар?

 .price .price-item {
  position: relative;
  margin: 10px auto 30px auto;
  width: 25%;
  text-align: center;
  padding: 30px;
  border: 1px solid rgba(0, 0, 0, .07);
}
 
 body {
  margin: 0;
  padding: 0;
}

/*******************************/
/********** Price CSS **********/
/*******************************/

.price {
  position: relative;
  width: 100%;
}

.price .section-header {
  width: 100%;
  text-align: center;
}


.price .container {
  width: 70%;
  margin: 40px auto;
  display: flex;
  flex-wrap: wrap;
}


.price .price-item {
  position: relative;
  margin: 10px auto 30px auto;
  width: 25%;
  text-align: center;
  padding: 30px;
  border: 1px solid rgba(0, 0, 0, .07);
}

.price .price-header {
  padding: 30px;
  background: #F7CAC9;
  color: #343148;
}

.price .price-status span {
  position: relative;
  display: inline-block;
  height: 30px;
  right: -30px;
  padding: 7px 10px;
  text-align: center;
  color: #343148;
  font-size: 14px;
  line-height: 14px;
  background: #F7CAC9;
}

.price .price-title h2 {
  font-size: 25px;
  font-weight: 700;
  text-transform: uppercase;
}

.price .price-prices h2 {
  font-size: 45px;
  font-weight: 700;
  margin-left: 10px;
}

.price .price-prices h2 small {
  position: absolute;
  font-size: 18px;
  font-weight: 400;
  margin-top: 9px;
  margin-left: -12px;
}

.price .price-prices h2 span {
  margin-left: 1px;
  font-size: 18px;
  font-weight: 400;
} 
 <!-- Price Start -->
<div class="price">
  <div class="section-header">
     <p>Yoga Package</p>
     <h2>Yoga Pricing Plan</h2>
  </div>
  <div class="container">
    <div class="price-item">
       <div class="price-header">
       <div class="price-title">
          <h2>Basic</h2>
       </div>
       <div class="price-prices">
           <h2><small>



lt;/small>49<span>/ mo</span></h2>

       </div>

     </div>

     <div class="price-body">

         <div class="price-description">

             <ul>

                <li>Personal Trainer</li>

                 <li>Special Class</li>

                 <li>Free Tutorials</li>

                 <li>Group Training</li>

             </ul>

          </div>

      </div>

      <div class="price-footer">

         <div class="price-action">

             <a class="btn" href="">Join Now</a>

         </div>

      </div>

   </div>


            <div class="price-item">

              <div class="price-header">

                <div class="price-title">

                    <h2>Basic</h2>

                </div>

                <div class="price-prices">

                    <h2><small>




lt;/small>49<span>/ mo</span></h2>

                </div>

              </div>

              <div class="price-body">

                <div class="price-description">

                    <ul>

                        <li>Personal Trainer</li>

                        <li>Special Class</li>

                        <li>Free Tutorials</li>

                        <li>Group Training</li>

                    </ul>

                </div>

              </div>

              <div class="price-footer">

                  <div class="price-action">

                    <a class="btn" href="">Join Now</a>

                  </div>

              </div>

            </div>


            <div class="price-item">

              <div class="price-header">

                <div class="price-title">

                    <h2>Basic</h2>

                </div>

                <div class="price-prices">

                    <h2><small>




lt;/small>49<span>/ mo</span></h2>

                </div>

              </div>

              <div class="price-body">

                <div class="price-description">

                    <ul>

                        <li>Personal Trainer</li>

                        <li>Special Class</li>

                        <li>Free Tutorials</li>

                        <li>Group Training</li>

                    </ul>

                </div>

              </div>

              <div class="price-footer">

                  <div class="price-action">

                    <a class="btn" href="">Join Now</a>

                  </div>

              </div>

            </div>


          </div>

        </div> 







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


1.  потому что родительский элемент    .price-item    имеет    padding    значение, которое не позволит дочернему элементу    .price-header    стать больше  


Ответ №1:




Вы не переопределили стиль заголовка по умолчанию H2, который по умолчанию имеет некоторый запас, просто сделайте ниже


 h2{margin:0}
 






 body {
  margin: 0;
  padding: 0;
}
h2{margin:0}

/*******************************/
/********** Price CSS **********/
/*******************************/

.price {
  position: relative;
  width: 100%;
}

.price .section-header {
  width: 100%;
  text-align: center;
}


.price .container {
  width: 70%;
  margin: 40px auto;
  display: flex;
  flex-wrap: wrap;
}


.price .price-item {
  position: relative;
  margin: 10px auto 30px auto;
  width: 25%;
  text-align: center;
  padding: 30px;
  border: 1px solid rgba(0, 0, 0, .07);
}

.price .price-header {
  padding: 30px;
  background: #F7CAC9;
  color: #343148;
}

.price .price-status span {
  position: relative;
  display: inline-block;
  height: 30px;
  right: -30px;
  padding: 7px 10px;
  text-align: center;
  color: #343148;
  font-size: 14px;
  line-height: 14px;
  background: #F7CAC9;
}

.price .price-title h2 {
  font-size: 25px;
  font-weight: 700;
  text-transform: uppercase;
}

.price .price-prices h2 {
  font-size: 45px;
  font-weight: 700;
  margin-left: 10px;
}

.price .price-prices h2 small {
  position: absolute;
  font-size: 18px;
  font-weight: 400;
  margin-top: 9px;
  margin-left: -12px;
}

.price .price-prices h2 span {
  margin-left: 1px;
  font-size: 18px;
  font-weight: 400;
} 


 <!-- Price Start -->
<div class="price">
  <div class="section-header">
     <p>Yoga Package</p>
     <h2>Yoga Pricing Plan</h2>
  </div>
  <div class="container">
    <div class="price-item">
       <div class="price-header">
       <div class="price-title">
          <h2>Basic</h2>
       </div>
       <div class="price-prices">
           <h2><small>



lt;/small>49<span>/ mo</span></h2>

       </div>

     </div>

     <div class="price-body">

         <div class="price-description">

             <ul>

                <li>Personal Trainer</li>

                 <li>Special Class</li>

                 <li>Free Tutorials</li>

                 <li>Group Training</li>

             </ul>

          </div>

      </div>

      <div class="price-footer">

         <div class="price-action">

             <a class="btn" href="">Join Now</a>

         </div>

      </div>

   </div>


            <div class="price-item">

              <div class="price-header">

                <div class="price-title">

                    <h2>Basic</h2>

                </div>

                <div class="price-prices">

                    <h2><small>




lt;/small>49<span>/ mo</span></h2>

                </div>

              </div>

              <div class="price-body">

                <div class="price-description">

                    <ul>

                        <li>Personal Trainer</li>

                        <li>Special Class</li>

                        <li>Free Tutorials</li>

                        <li>Group Training</li>

                    </ul>

                </div>

              </div>

              <div class="price-footer">

                  <div class="price-action">

                    <a class="btn" href="">Join Now</a>

                  </div>

              </div>

            </div>


            <div class="price-item">

              <div class="price-header">

                <div class="price-title">

                    <h2>Basic</h2>

                </div>

                <div class="price-prices">

                    <h2><small>




lt;/small>49<span>/ mo</span></h2>

                </div>

              </div>

              <div class="price-body">

                <div class="price-description">

                    <ul>

                        <li>Personal Trainer</li>

                        <li>Special Class</li>

                        <li>Free Tutorials</li>

                        <li>Group Training</li>

                    </ul>

                </div>

              </div>

              <div class="price-footer">

                  <div class="price-action">

                    <a class="btn" href="">Join Now</a>

                  </div>

              </div>

            </div>


          </div>

        </div> 







Ответ №2:




Удалите отступы и поля по умолчанию, всегда начинайте свой код с :-


 `*{
margin:0;
padding:0;
box-sizing: border-box;
}`
 










	Метки: