I’m trying to add a padding inside list item :
I tried
.page li {
padding: 10px;
}
but it doesn’t work
Thank in advance ?
>Solution :
You can do it with line-height:
The
line-heightCSS 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>