Unable to update `margin: 0;` on child divs

Can anyone help me remove the margins of the child divs so that the squares defined at #overview > div are aligned next to each other?

#overview {
  display: inline-block;
  margin: 0em;
  padding: 0em;
  background: green;
}

#overview > div {
  width: 1.5em;
  height: 1.5em;
  display: inline-block;
  margin: 0;
  border-bottom: 2px solid black;
}

div.type1 {
  background: #990099;
}

div.type2 {
  background: #000080;
}
div.type3 {
  background: #734d26;
}

div.type4 {
  background: #990000;
}
<div id="overview">
  <div class="type4"></div>
  <div class="type2"></div>
  <div class="type4"></div>
  <div class="type2"></div>
  <div class="type3"></div>
  <div class="type2"></div>
  <div class="type2"></div>
</div>

Check out my jsfiddle here.

I need a solution without using floating or setting negative margins. Can anyone provide some assistance?

Thank you for your help!

htmlcss

Answer №1

Consider using the following CSS code snippet:

#overview {
  display: flex;
  margin: 0em;
  padding: 0em;
  background: green;
  flex-direction:row;
}

#overview > div {
  width: 1.5em;
  height: 1.5em;
  border-bottom: 2px solid black;
}

div.type1 {
  background: #990099;
}

div.type2 {
  background: #000080;
}
div.type3 {
  background: #734d26;
}

div.type4 {
  background: #990000;
}
<div id="overview">
  <div class="type4"></div>
  <div class="type2"></div>
  <div class="type4"></div>
  <div class="type2"></div>
  <div class="type3"></div>
  <div class="type2"></div>
  <div class="type2"></div>
</div>

Answer №2

Your browser is interpreting the line breaks as spaces, which is causing the extra spacing. To resolve this, try removing the line breaks (it may look messy but will fix the issue without altering any CSS). Here is the HTML snippet:

<div id="overview">
    <div class="type4"></div><div class="type2"></div><div class="type4"></div><div class="type2"></div><div class="type3"></div><div class="type2"></div><div class="type2"></div>
</div>

Below is your CSS:

#overview {
    display: inline-block;
    margin: 0em;
    padding: 0em;
    background: green;
}

#overview > div {
    width: 1.5em;
    height: 1.5em;
    display: inline-block;
    margin: 0;
    border-bottom: 2px solid black;
}

div.type1 {
    background: #990099;
}

div.type2 {
    background: #000080;
}
div.type3 {
    background: #734d26;
}

div.type4 {
    background: #990000;
}

View the JSFiddle for a better understanding.

Answer №3

To center your child elements (divs), make sure to include the CSS property "vertical-align: middle;"

#overview {
  display: inline-block;
  margin: 0em;
  padding: 0em;
  background: green;
}

#overview > div {
  width: 1.5em;
  height: 1.5em;
  display: inline-block;
  vertical-align: middle;
  margin: 0;
  border-bottom: 2px solid black;
}

div.type1 {
  background: #990099;
}

div.type2 {
  background: #000080;
}
div.type3 {
  background: #734d26;
}

div.type4 {
  background: #990000;
}
<div id="overview">
  <div class="type4"></div>
  <div class="type2"></div>
  <div class="type4"></div>
  <div class="type2"></div>
  <div class="type3"></div>
  <div class="type2"></div>
  <div class="type2"></div>
</div>

Answer №4

The reason for the alignment issue is that the float left property was not added to your #overview > div as shown below. You can now adjust the margin values as needed.

#overview > div {
  float: left;
}

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

ng-init assign value to a new object

<!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> <body> <div ng-app="myApp" ng-controller="myCtrl2" ng-init="person = new Person('Al ...

javascripthtmlangularjs

Tips for utilizing the <img src> tag within Google Apps Script

I am trying to incorporate an image into a google apps script using the src attribute. I have specified the folder id and path, but unfortunately the image is not displaying as expected. The folder has been shared here for reference. Any assistance with t ...

htmlgoogle-apps-script

Adjust the CSS of the currently dragged item using jQuery sortable

I am currently using jQuery-ui sortable and facing an issue with changing the appearance of a dragged item. I would like the text value of the component inside the red background container to be displayed while dragging. Can someone please assist me with t ...

jqueryhtmlcssjquery-uijquery-ui-sortable

Obtain the content from a dynamically generated dropdown menu and incorporate it into a separate file

My website features two dropdown menus - one for selecting countries and another for cities. The country menu is populated with data from a database, and once a country is selected, the city dropdown is dynamically filled with corresponding cities using a ...

phpjqueryhtmlajax

How can I use jQuery to show the text value of a selected checkbox, dropdown menu, and flipswitch in a popup?

This form's HTML is set up for input with a popup display feature upon submission. Currently, only text can be displayed in the popup. It doesn't show the text of selected checkboxes or dropdown lists - just numbers for the dropdown and "ON" for ...

jqueryhtmlformsjquery-mobilepopup

resizing videos in wordpress

Similar Question: How to Resize Embedded Videos Using PHP I am looking to adjust the dimensions of videos to be 280 pixels in height and 520 pixels in width on my WordPress homepage. Currently, the code is using the original YouTube dimensions: ...

phphtmlcsswordpressvideo

How to make Firefox create a new line in a contenteditable field

I am working with a contenteditable div that is within a parent div with a floating width of 50%. My goal is to set the max width of the content editable to match the container, even if the text spans multiple lines. Here is the CSS I tried: .editable-con ...

htmlcssfirefoxcontenteditable

Once the PHP page loads, it becomes challenging for me to dynamically change values in JavaScript

Within my code snippet below, I am aiming to modify the initial value using a slider. The slider appears to be functioning correctly; however, it is not updating the values of timeout as indicated beneath the line $('ul.<?php echo $this->session ...

javascriptphpjqueryhtml

Using PHP to create multi-dimensional arrays and display them in a HTML table

Need help with this issue: Here is the array I'm working with: $tabel3 = array ( array ( "progdas" => "Java", "sks" => "3", "prior" => "2" ), array ( "progdas" => "C#", "sks" => "6", "prior" => "1" ), array ( "mat" => "Dasar", ...

phphtmlarrayshtml-table

What is the best way to create a navbar with a grid that spans the full height and includes two rows

My approach to structuring the layout using CSS grid is as follows: nav content nav footer This means that the 'nav' will occupy the entire height of the page with a specified width, and the remaining space will be divided between the 'cont ...

csssasscss-grid

What could be causing the Php Media Gallery to malfunction?

I am currently working on setting up a video/image gallery to simplify the process of uploading videos/images. This gallery will include thumbnail images of the videos/images along with a brief description. When the thumbnail is clicked, the image/video wi ...

phpjqueryhtmlmysqlcss

Text displayed in a pop-up when hovering

I'm in search of suggestions for creating a text pop-up that displays when the mouse hovers over specific text. After researching numerous websites, I haven't found exactly what I need. Currently, I have a table with headers at the top and I woul ...

c#javascriptjqueryhtmljquery-hover

Enhance a portion of your text with some flair

Is it possible to apply styles to specific parts of text that are within an <input> value or a <span> element? For instance, I have the following data: {text text} an other text... I want to add styles to the text enclosed within {}. Here i ...

javascriptjqueryhtmlcss

The form submission messages that are being received are appearing blank, even when the name field is populated with an

Hey there! I'm experiencing an issue with my form. Even though I've set the name attribute to "" for all fields, the submitted data comes back blank in my email. Here's a snippet of my code: <div class="col-lg-6 ...

htmlcssemailform-submit

The Angular material checkbox has a mind of its own, deciding to uncheck

I am having an issue with a list displayed as checkboxes using angular-material (Angular 7). Below, I will provide the code snippets for both the .html and .ts files. Every time I click on a checkbox, it gets checked but then immediately becomes unchecked ...

htmlangulartypescriptangular-material

Creating a Striking Multi-Layered CSS Header

Can someone help me figure out how to add horizontal lines behind the words in this header? Here is what I have so far: https://i.sstatic.net/dN7s4.jpg. However, I want to achieve something similar to this design: https://i.sstatic.net/FZoSF.jpg. You can v ...

htmlcss

In Chrome browser, the orientation of the options in the datalist remains consistent

Is there a way to change the direction of the datalist's options to RTL? While I'm able to change the direction of the input element, the same doesn't apply to the options of the datalist. I've attempted setting the dir attribute to r ...

htmlcssgoogle-chrome

When double quotes are used in a string within an HTML input field, they may display as &

Using PHP, I am retrieving data from an SQL database and generating JavaScript code to create an edit button for each entry. The edit button triggers a text input field within a form. When the user clicks on the generated edit button, the text in this inpu ...

javascriptphphtmlsql

Issue with Laravel: CKEditor text not loading HTML tags

Could you assist me with this? click here for the image description image description available here ...

javascriptphphtmllaravelckeditor

Limit image size in Outlook when using Mailchimp

I'm currently working on coding a Mailchimp template for a client and I've run into an issue with image dimensions. The problem arises when images exceed the width of the template (usually 600px), as they are displayed at their original size in ...

htmlcssimageoutlookmailchimp