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>