Adding a padding inside list item

Question

I'm trying to add a padding inside list item :

I tried

.page li {     
padding: 10px; 
} 

but it doesn't work

Thank in advance ?

Answer 1

You can do it with line-height:

The line-height CSS property sets the height of a line box. It's commonly used to set the distance between lines of text. On block-level elements, it specifies the minimum height of line boxes within the element. On non-replaced inline elements, it specifies the height that is used to calculate line box height.

Demo:

.page li {
  line-height: 2em;
 }

<p>
with line-height:
</p>

<ul class="page">
    <li>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo tempora quas similique sed quaerat commodi ipsum reiciendis nisi dolor repellat est aliquam quod at harum temporibus reprehenderit eaque, ut assumenda.</li>
    <li>Vel praesentium accusamus nihil id fugit quasi aperiam perferendis harum quidem corporis aliquam, quod nobis architecto recusandae quaerat velit nesciunt necessitatibus quam pariatur expedita quibusdam! Quia odio similique velit veniam?</li>
    <li>Adipisci earum aspernatur quibusdam optio id rem impedit nam soluta itaque porro illum maiores, accusantium cum veniam alias, nesciunt corporis voluptas natus enim repudiandae libero placeat quidem reprehenderit? Quam, ex.</li>
    <li>Rerum voluptatem ratione harum officia, veniam ipsum. Quibusdam, quasi impedit consequuntur quaerat distinctio officia. Animi, laudantium deleniti quo illo, unde facere delectus nam modi dicta dolorum neque perferendis qui eaque.</li>
    <li>Molestias quaerat dolorem fugiat error iste, tempora quos suscipit at eligendi nemo expedita harum facilis cumque quod provident tenetur consequatur placeat. Porro, rem et nostrum libero nisi inventore aut vero.</li>
    <li>In autem possimus amet, aut mollitia reiciendis quae iure! Officia impedit maxime iusto repellat magni natus quasi magnam aliquam velit, inventore error earum incidunt nostrum consequatur sunt. Nihil, dolorum dolore.</li>
</ul>

<p>
vs without line-height:
</p>
<ul>
    <li>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo tempora quas similique sed quaerat commodi ipsum reiciendis nisi dolor repellat est aliquam quod at harum temporibus reprehenderit eaque, ut assumenda.</li>
    <li>Vel praesentium accusamus nihil id fugit quasi aperiam perferendis harum quidem corporis aliquam, quod nobis architecto recusandae quaerat velit nesciunt necessitatibus quam pariatur expedita quibusdam! Quia odio similique velit veniam?</li>
    <li>Adipisci earum aspernatur quibusdam optio id rem impedit nam soluta itaque porro illum maiores, accusantium cum veniam alias, nesciunt corporis voluptas natus enim repudiandae libero placeat quidem reprehenderit? Quam, ex.</li>
    <li>Rerum voluptatem ratione harum officia, veniam ipsum. Quibusdam, quasi impedit consequuntur quaerat distinctio officia. Animi, laudantium deleniti quo illo, unde facere delectus nam modi dicta dolorum neque perferendis qui eaque.</li>
    <li>Molestias quaerat dolorem fugiat error iste, tempora quos suscipit at eligendi nemo expedita harum facilis cumque quod provident tenetur consequatur placeat. Porro, rem et nostrum libero nisi inventore aut vero.</li>
    <li>In autem possimus amet, aut mollitia reiciendis quae iure! Officia impedit maxime iusto repellat magni natus quasi magnam aliquam velit, inventore error earum incidunt nostrum consequatur sunt. Nihil, dolorum dolore.</li>
</ul>