No Leading or Trailing Padding And No Combining Of Adjacent Paddings

HTML & CSS
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