Spacing elements (no collapsing)

Developer
James Nowland
Size
2,772 Kb
Views
12,144
  1. Spacing elements (no collapsing) Previews
  2. Spacing elements (no collapsing) HTML Codes
  3. Spacing elements (no collapsing) CSS Codes
  4. Spacing elements (no collapsing) JS Codes

How do I make an spacing elements (no collapsing)?

See: http://simurai.com/blog/2014/05/25/spacing-elements/Forked from simurai's Pen Spacing elements (no collapsing).. What is a spacing elements (no collapsing)? How do you make a spacing elements (no collapsing)? This script and codes were developed by James Nowland on 31 October 2022, Monday.

Spacing elements (no collapsing) Previews
IQ Test

Spacing elements (no collapsing) - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Spacing elements (no collapsing)</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>Equal Spacing without <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin_collapsing">margin-collapsing</a></h1>
<h2>First child display:none proof</h2>
<header class="Header"> <div class="Header-item" style="display:none;">Item</div> <div class="Header-item">Item</div> <div class="Header-item">Item</div> <div class="Header-item">Item</div>
</header>
<h2>First child & (sibling * n) display:none proof</h2>
<header class="Header"> <div class="Header-item" style="display:none;">Item</div> <div class="Header-item" style="display:none;">Item</div> <div class="Header-item">Item</div> <div class="Header-item">Item</div>
</header>
<h2>Last child display:none proof</h2>
<header class="Header"> <div class="Header-item">Item</div> <div class="Header-item">Item</div> <div class="Header-item">Item</div> <div class="Header-item" style="display:none;">Item</div>
</header>
<a href="http://simurai.com/blog/2014/05/25/spacing-elements/">See simurai post for more context.</a> <script src="js/index.js"></script>
</body>
</html>

Spacing elements (no collapsing) - Script Codes CSS Codes

/* This method works because we use first child which allows us to go down the dom*/
.Header-item { margin-right: 2rem;
}
.Header-item:first-child { margin-left: 2em;
}
.Header-item:first-child[style*="display:none;"]
~ .Header-item:not([style*="display:none;"]) { margin-left: 2em;
}
.Header-item:first-child[style*="display:none;"]
~ .Header-item:not([style*="display:none;"]) ~ .Header-item { margin-left: initial;
}
.is-hidden { display: none;
}
/* ------------------------------------ */
.Header { display: -webkit-box; display: -ms-flexbox; display: flex; background: #c8d9f9;
}
.Header-item { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; text-align: center; line-height: 3; color: white; background: #6494ed;
}
body { font-size: 18px; font-family: Avenir, sans-serif; text-align: center;
}

Spacing elements (no collapsing) - Script Codes JS Codes

// In reply to this:
// http://simurai.com/blog/2014/05/25/spacing-elements/
Spacing elements (no collapsing) - Script Codes
Spacing elements (no collapsing) - Script Codes
Home Page Home
Developer James Nowland
Username jnowland
Uploaded October 31, 2022
Rating 3
Size 2,772 Kb
Views 12,144
Do you need developer help for Spacing elements (no collapsing)?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

James Nowland (jnowland) Script Codes
Name
CSS Ribbon with inner border.
CSS3 Stroke and Gradient Text
Download Rebound
Dribble Button CSS Rebound
SVG Modified with Query String
Login Form CSS only validation
Pure CSS Spinner
A Pen by James Nowland
Step 3
Lorem pixel Images
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!