Как сделать расстояние между p?

Question

как сделать такое-же расстояние между текстом,и как сделать чередование цвета как на картинке 2?

#products_text {
    margin: 0px 600px 10px 10px;
    background-color: #d9cc95;

}

<div id= "products_text">
                    <p>191 Mountain Tire Tube</p>
                    <p> 184 Patch Kit/8 Patches</p>
                     <p>175 Water Bottle - 30 oz.</p>
                    <p> 161 Road Tire Tube</p>
                    <p> 110 Fender Set - Moutain</p>     
                </div>
            </div>

Answer 1

С цветом все легко, для этого используется псевдо-элемент nth-child, к примеру.

p:nth-child(1,4) {
   color: green;
}
p:nth-child(2,5) {
   color: pink;
}
p:nth-child(3,6) {
   color: blue;
}

Вот HTML + css код:

<!doctype html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #products_text {
            width: 100%;
            height: 100%;
            font-size: 20px;
        }

        * {
            margin: 0;
            padding: 0;
        }
        .int, .text {
            float: left;
            width: 45%;
        }

        div:nth-child(odd) {
            background: red;
            float: left;
            width: 100%;
        }
        div:nth-child(even) {
            background: green;
            float: left;
            width: 100%;
        }
    </style>
</head>
    <body>

        <div id= "products_text">
            <div class="case">
                <p class="int">
                    192
                </p>
                <p class="text">
                    Mountain Tire Tube
                </p>
            </div>
            <div class="case">
                <p class="int">
                    432
                </p>
                <p class="text">
                    Mountain Tire Tube
                </p>
            </div>
            <div class="case">
                <p class="int">
                    21312
                </p>
                <p class="text">
                    Mountain Tire Tube
                </p>
            </div>
            <div class="case">
                <p class="int">
                    123
                </p>
                <p class="text">
                    Mountain Tire Tube
                </p>
            </div>
        </div>

    </body>
</html>

БЛОГ НА HUSL

Как сделать расстояние между p?

Ответы (1 шт):