No Leading or Trailing Padding And No Combining Of Adjacent Paddings

HTML & CSS
1

I have a horizontal unordered list displayed as inline block that has the same width as its parent and when the screen width decreases to a certain size, it will break formation and go to the next row forming two rows of equal length. This unordered list consists of 8 list items and each list item is separated from its neighbor by a padding.

I would like the first list item to have a right padding but no left padding and the last list item to have a left padding but no right padding.

Also I noticed that each list item has its own padding and because of this, paddings of adjacent list items will create a large gap between them which will have a width of two paddings put together.

Please help me eliminate the trailing and leading paddings and collapse paddings of adjacent list items if possible using CSS.

3

Hi @oangodd and welcome to the forums.
It seems the first-child and last-child selectors is what you are looking for. Found this link for you https://quirksmode.org/css/selectors/firstchild.html

Hope it helps

4

Hi, oangodd.

The adjacent sibling selector will assign padding-left (or any other CSS property) to all but the first item. No doubling of padding anywhere. No need for nth-child or first-child and last-child pseudo-selectors which are a bit heavier.

li + li {padding-left:2px}

2 Likes
5

Hi ronpat, thanks for responding. When the horizontal unordered list wraps it forms two rows and the bottom paddings of the list items in the top row add to the top paddings of the list items in the bottom row.

To prevent the doubling of the paddings of the top and bottom list items I would like to remove the top paddings of list items in the bottom row. This is a bit tricky because I only want to remove them when the list wraps.

6

What causes the lists to wrap?

If you use media queries to cause the wrapping then you can change the styling accordingly at that point.

I think we’d need to see a demo of what you have to give more specific advice.:slight_smile: Pleas provide html and css or a codepen etc.

7

Here is my codepen link

It doesn’t appear my media queries are working in code pen.

8

That link is giving a 404.

9

Whilst it chooses to takes me to a Log In! page. :eek:

coothead

10

Please try it now.

11

Hi there oangodd,

here is one possible solution…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<link rel="stylesheet" href="screen.css" media="screen">

<style media="screen">
body {
    background-color: #f0f0f0;
    font: 1em/150% verdana, arial, helvetica, sans-serif;
 }
ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    list-style:none; 
    margin: 0; 
    padding: 0;
 }

ul li{
    width:12%;  
    min-height: 10em;
    padding:1em; 
    margin-bottom: 0.4em;
    box-sizing: border-box;
    background: #00f;
    color: #fff;
 }

@media (max-width: 69em ) {
ul li {
    width: 24.5%;  
  }
 }

@media (max-width: 40em ) {
ul li {
    width: 49.5%;  
  }
 }

@media (max-width: 20em ) {
ul li {
    width: 100%;  
  }
 }
</style>

</head>
<body> 
 <ul>               
  <li>
   <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   </p>
  </li>
  <li>2</li>
  <li>
   <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   </p>
  </li>
  <li>4</li>
  <li>
   <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   </p>
  </li>
  <li>6</li>
  <li>
   <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   </p>
  </li>
  <li>8</li>    
 </ul>

</body>
</html>

coothead

2 Likes
12

Hi coothead, thanks for your solution. I 've tried out your solution and it works great, however I still would like to know why I cannot simply remove the leading, trailing, and adjacent paddings without having to resort to using the flexbox.

13

@oangodd,

I’m sure you tried to answer your question yourself before asking here. What happened when you removed those “undesired” paddings?

You do not have to resort to flexbox, but you will likely be disappointed by any other method. It depends on your requirements. If consistent height boxes across each row in a responsive site are important, then flex is the easiest solution, by far. Other methods are clunky in comparison.

14

Here are two “solutions”,: one uses the inline-blocks - the inline-blocks are only as tall as their content;
the other solution is similar to cootheads in that it uses flex - the flex items in each row are the same height.

In both solutions, the padding used is minimal (that was one of your concerns).
The contents of the media queries has been significantly reduced.

<aside>
The CSS is coded using the “desktop first” technique. You can use “mobile first” just as easily by reversing the logic behind the property changes. Some folks prefer “mobile first” because it tends to use less CSS. I find it easier to envision building the desktop first and subtracting the content for smaller devices rather than adding to the content of a mobile device so the site will adapt to larger viewports.

Copy both of these “working pages” to files with .html suffixes and open them in a pair of tabs in your browser to compare the way they work.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="css/stylesheet.css">
    <title>inline-block</title>
<!--
https://www.sitepoint.com/community/t/no-leading-or-trailing-padding-and-no-combining-of-adjacent-paddings/279226/7
oangodd
Oct 25, 2017 11:49 PM
https://codepen.io/CSSAnomaly/pen/EwqJza
-->
    <style>
html {
    box-sizing:border-box;
}
*,*::before,*::after {
    box-sizing:inherit;
}

.container {}  /* NOT BEING USED */
ul {
    list-style:none;
    display:table;
    width:100%;
    text-align:center;
    word-spacing:-.5em;
    background-color:#999;
    padding:4px;
    margin:0;
}
ul li {
    display:inline-block;
    vertical-align:top;
    text-align:left;
    width:12.5%;
    word-spacing:0;
    background-color:blue;
    border:4px solid #999;
    padding:0 .75em;
/*    outline:1px dashed white;  /* TEST Outline. To be DELETED or commented out. */
}
p {
    color:white;
    line-height:1.4;
    margin:.5em 0;
}

@media screen and (max-width: 1200px) {
    ul li {
        width:25%;
    }
}
@media screen and (max-width: 900px) {
    ul li {
        width:33.3%;
    }
}
@media screen and (max-width: 700px) {
    ul li {
        width:50%;
    }
}
@media screen and (max-width: 500px) {
    ul, ul li {
        display:block;
        width:auto;
    }
}
    </style>
</head>
<body>

<div class="container">
    <ul>
        <li>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
        </li>
        <li>
            <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
        </li>
        <li>
            <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
        </li>
        <li>
            <p>4</p>
        </li>
        <li>
            <p>5</p>
        </li>
        <li>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
        </li>
        <li>
            <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
        </li>
        <li>
            <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
        </li>
    </ul>
</div>

</body>
</html>

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="css/stylesheet.css">
    <title>flex</title>
<!--
https://www.sitepoint.com/community/t/no-leading-or-trailing-padding-and-no-combining-of-adjacent-paddings/279226/7
oangodd
Oct 25, 2017 11:49 PM
https://codepen.io/CSSAnomaly/pen/EwqJza
-->
    <style>
html {
    box-sizing:border-box;
}
*,*::before,*::after {
    box-sizing:inherit;
}

.container {}  /* NOT BEING USED */
ul {
    list-style:none;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    background-color:#999;
    padding:4px;
    margin:0;
}
ul li {
    width:12.5%;
    background-color:blue;
    border:4px solid #999;
    padding:0 .75em;
/*    outline:1px dashed white;  /* TEST Outline. To be DELETED or commented out. */
}
p {
    color:white;
    line-height:1.4;
    margin:.5em 0;
}

@media screen and (max-width: 1200px) {
    ul li {
        width:25%;
    }
}
@media screen and (max-width: 900px) {
    ul li {
        width:33.3%;
    }
}
@media screen and (max-width: 700px) {
    ul li {
        width:50%;
    }
}
@media screen and (max-width: 500px) {
    ul, ul li {
        display:block;
        width:auto;
    }
}
    </style>
</head>
<body>

<div class="container">
    <ul>
        <li>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
        </li>
        <li>
            <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
        </li>
        <li>
            <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
        </li>
        <li>
            <p>4</p>
        </li>
        <li>
            <p>5</p>
        </li>
        <li>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
        </li>
        <li>
            <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
        </li>
        <li>
            <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
        </li>
    </ul>
</div>

</body>
</html>
1 Like
17

Hi Ronpat, thanks for replying. This excercise is a way for me to better understand CSS3 so it would really help if you could expain why my css is not working as expected. Please look at my CSS in codepen, I tried to set the width of each list item to 10.75%, set the leading and trailing paddings to 0, and set the adjacent paddings to 2%.

The problem is each list item is not shrinking as the screen width decreases. Instead the unordered list breaks and forms two rows of list items as a second or two after the screen width decreases which is way too soon.

18

Briefly,

(1) Inline elemets have “word-spacing” space below and after them just like words in a sentence. Your list items are coded to be inline-block so they have this “word-spacing” space therefore your percent widths plus the fixed word-spacing widths do not track with the width of the page. One must negate the word spacing somehow. Floats are one method of removing the inline “word spaces”. There are others.

(2) Remember that padding fits inside the box. Margins fit outside. You would be better off separating the boxes with margins.

(3) The use of {box-sizing:border-box} places padding inside established box widths without expanding that width as the basic box model would.

Hope this helps with CSS1 and CSS2 also. :slight_smile:

1 Like
19

Thank you so much, that was very helpful.

20

to negate word spacing by far best solution is to make font-size:0px that takes away word spacing and to avoid padding issues when sizing elements for me is to use box-sizing:border-box

using this method calculates the padding along with the actual size of the div for instance if a div was 30% and you made a padding of 1% left and right that would be 32% taken away from 100%,

But using box sizing tells the browser that the box is 30% therefore adding 1% left and right would make the content inside the element to be 28% instead using the 2% for the left and right as padding.

21

If you are setting the font sizes in your content with rems, then negating word-spacing by assigning {font-size:0} to the parent container of the inline-block elements will work in modern browsers.

There is a lengthy discussion in this thread from last year that explores several interesting techniques for negating the white-space between inline elements, including what works and what doesn’t. It’s well worth the read.

22

That’s a great thread. I had forgotten most of the ins and outs of that topic.:slight_smile:

1 Like
23

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.