How to create space between elements in CSS without using margin or padding?

Recently, I stumbled upon a fascinating website while working on my own CSS grid project:

I am curious to know how it was achieved. The Portfolio elements on the website have space between them without any visible margins or paddings that I could identify:

<article class="mix portfolio_category_2  mix_all" style=" "><div class="image_holder standard_hover"><span class="image">(...)</article>

2% margin (mysterious origin!)

<article class="mix portfolio_category_2  mix_all" style=" "><div class="image_holder standard_hover"><span class="image">(...)</article>

I initially suspected Bootstrap, but Bootstrap's grid system typically includes margins. These elements seem to only have bottom margins, with no margins on the right or left. How do you think they did it?

cssmargin

Answer №1

Here is a CSS rule that defines the styling for a container:

.projects_holder {
  ...
  text-align: justify;
  ...
}

Experiment with deleting this rule in the browser's development console.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Design a circular progress bar with a cut-off at the bottom

Does anyone have suggestions on how to create a circular progress bar with cropping at the bottom, similar to this example: PROGRESS BAR? I've been searching for a component like this but haven't had any luck. Any ideas, especially utilizing Mate ...

javascriptcssreactjsmaterial-uifrontend

Turn off HTML5 Audio

There are 4 <audio> elements on a webpage. The client has asked for them to be available sequentially. Meaning, the first audio should play, then the rest should remain disabled until the first one finishes, and so on. In addition, they want the au ...

javascriptjquerycsshtmlaudio

Avoid losing focus on href="#" (preventing the page from scrolling back up to the top)

Is there a way to prevent an empty href link from causing the page to scroll up when clicked? For example, if I have: <a href="#">Hello world</a> And this "Hello world" link is in the middle of the page. When clicked, the URL would look like ...

javascriptjqueryhtmlcss

Purge the external CSS files

Scenario In my React Router setup, most pages include their own .css files along with the default antd (UI framework) stylesheet: import '../styles.css'; This ensures that all components inherit these styles automatically. Issue at Hand Now, I ...

javascriptcssreactjsreact-routerantd

Failure to align Bootstrap columns side by side despite being within the same row

I'm having an issue with aligning the columns in my testimonials section. Despite using col-md-5 for each column, they are not lining up side by side as expected. Here is the code I am currently using: <section id="testimonials"> <d ...

htmlcssbootstrap-4

Creating a modal using JavaScript and CSS

When I click on the hello (plane geometry) as shown in the figure, a popup appears on the extreme left of the screen instead of appearing on the plane geometry box. Can someone please help me fix this issue? I have also included the code below: https://i. ...

javascripthtmlcssthree.js

Tips for formatting nested Angular components in a visually pleasing manner:

Seeking guidance on the best approach for the following scenario: I have an angular component positioned at a specific route. Let's say the route is: /main-page Currently, the template spans the full width of the screen at this route. I want to add ...

htmlcssangularsass

Deploying CSS/JS files in Magento 2 is a crucial

Hello, I recently set up magento2 with the sample data included. After attempting to deploy static css/JS using the command php bin/magento setup:static-content:deploy, I didn't receive any errors but the issue persists. Additionally, I am unable to l ...

javascriptcssmagento2

Personalizing Google Map pin

I found some code on Codepen to add pointers to a Google map. Currently, it's using default markers but I want to change them to my own. However, I'm not sure where in the code to make this update. Any examples or guidance would be appreciated. ...

javascriptcssgoogle-maps

I am experiencing difficulty with the color of my progress bar in Firefox

After successfully creating an interactive progress bar that works perfectly in Google Chrome and surprisingly also in Safari without vendor prefixes, I encountered a roadblock when testing it on Firefox. The progress bar color reverts back to the default ...

javascriptcsshtmlfirefox

What methods are available to create a transition animation for an HTML 5 banner on iOS devices?

I need assistance with animating an HTML5 banner to transition vertically onto the screen in my app demo. After a prompt that triggers a server callback, the banner should smoothly move down from the top of the screen. The animation I am aiming for is simi ...

ioshtmlcsscss-transitionshtml5-animation

Transforming Input Background Color with jQuery based on Matching PHP Array Entry

I am looking for a solution to implement form validation in PHP. The form has 3 fields: user, id, and email. When a user enters their name or id in the respective input fields, I want to check if the entered value matches any of the values in the PHP arra ...

phpjquerycssinput

The website displays perfectly in Atom, however, it is not functional in any web browser

My website is currently in the development phase, and I'm experiencing issues with certain div elements not positioning correctly once the site goes live. Specifically, the "Follow Us" tab at the bottom of the site, among other divs, has been affecte ...

javascripthtmlcss

Is it possible to assign a class to the initial word within a designated class?

How can I customize the first and second word of a specific class in my code? This is an example of my current code: <h2 class="content-heading">Latest News</h2> I would like to achieve something similar to this: <h2 class="content-headi ...

javascriptjqueryhtmlcss

I'm curious why I can only see the HTML code and not the three.js code as well

I attempted to run a sample three.js game today, but only the HTML code appeared. I've also installed three.js with npm and tried running it with the VSC Live Server, but it's not working. You can find the source code here. What should be my nex ...

javascripthtmlcssthree.js

The button's background color remains the same even after clicking on it

In my exploration of Vue.js, I decided to create a simple project to grasp the concept of class binding. I wanted to add functionality to each button component, so that when a button is clicked, it would change its color or background color to something ot ...

javascripthtmlcssvue.jsbutton

Images are suddenly encircled by a mysterious border

On my wordpress website, I encountered a strange issue with some photos. Specifically, an image of a cross in a circle is getting a weird border around it, but only on certain resolutions (such as width:1506). Despite inspecting the element, I couldn' ...

htmlcsswordpress

The use of the `/deep/` combinator in CSS has been phased out and is set to be completely removed

After updating my angular to version 4.0.0 and chrome to 62.0.3202.94, I encountered the following error message: [Deprecation] /deep/ combinator in CSS is deprecated and will be removed in M63, around December 2017. Refer to for more information. The ...

htmlcssangular

I am looking for an HTML solution that allows me to neatly stack photos of different sizes in two columns, always prioritizing the column with more empty space

Is there an easy method to populate two columns, each with a width of 50%, with photos in a way that the next photo is always added to the column with more available space? The photos come in different sizes but should be able to fit within the width of t ...

htmlcssstackalignment

An issue with jQuery and LESS causing stylesheets to update only once

Struggling with updating a custom CSS href - everything works perfectly the first time, but subsequent updates do not reflect any changes on the page. Even though I can see the href updating in Chrome debugger and there are no errors being thrown by LESS, ...

jquerycssstylesheetlessasp.net-mvc-4