Mysterious additional spacing

I am facing an issue with aligning my div elements with a 20px margin. Despite setting the margin to 20px, I notice that there are additional 4 pixels rendered when I view it on the browser. Below is the code snippet:

.block{
    width:50px;
    height:50px;
    background:red;
    display:inline-block;
    margin-right:20px;
    vertical-align:top;
}

*{
    margin:0
    padding:0
    border-width:0px;
}

You can investigate further by checking out https://jsfiddle.net/zyfzbyed/8/ with your inspector tool. The main question I have is: How do I eliminate that extra margin? Thank you.

Answer №1

To format your HTML properly, use

<div class='block'></div><div class='block'></div>

instead of

<div class='block'>

</div>
<div class='block'>

</div>

If you prefer to resolve this through CSS, adjust the div's flow by setting it to left like this:

.block{
    width:50px;
    height:50px;
    background:red;
    display:inline-block;
    margin-right:0px;
    vertical-align:top;
    float: left;
}

Answer №2

To eliminate the additional margins caused by inline-block elements, you can include float:left; in the CSS styling for .block. The revised CSS for block should look like this:

.block{
  width:50px;
  height:50px;
  background:red;
  display:inline-block;
  margin-right:0px;
  vertical-align:top;
  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

What is the best way to showcase a JSON object in an attractive format on a webpage?

Similar Question: JavaScript data formatting/pretty printer var theobject_string = '{...}'; // I have a JSON object as a string. Is there a way to present this string in a visually appealing manner on an HTML webpage? I would like the ...

Animating ng-switch transitions within a div element

Utilizing bootstrap 3 panel along with ng-switch for a sliding animation: Check out the Plunker here I am facing an issue where the animation extends past the borders of the panel instead of staying within it. How can I fix this in my Plunker? The desire ...

Interactive jQuery feature for dynamic search suggestions across multiple entries

Here is the HTML code snippet I am working with: <input name="data[Content][0][name]" type="text" class="content_name_1" id="content_name"> <input name="data[Content][1][name]" type="text" class="content_name_2" id="content_name"> ...

CSS class malfunction - various classes with identical functions

I'm new to the world of web development and design, embarking on a journey to learn all I can in these fields. Recently, I attempted to create unique hover styles for each menu button within my CSS classes-based menu list. However, I encountered an i ...

Is it possible to use CSS to create a gap between the cursor and the placeholder text within an input field?

Could you please assist me with a bug I have encountered on an older version of Firefox for OSX (37.0.2)? I have included a screenshot of the issue here: Is there a way to use css to move the first character of the placeholder text away from where the cur ...

Creating a vertical stacked barchart using React and Svg without relying on any external libraries

I have been working on a piece of code that utilizes React and SVG to create bar charts without the use of any third-party libraries. Currently, my charts are displayed horizontally, but I would like them to be displayed vertically instead. Despite trying ...

Curved edges on a text box featuring a scroll bar

I'm facing an issue with my website where I have a large amount of text in an html textarea that requires a scroll bar. The problem is, I'd like to add rounded corners to the textarea, but it doesn't look good with the scroll bar. Below is ...

Dynamic visual content (map)

I'm currently working on creating an interactive image for my website where clicking on points A, B, C, ... N will reveal bubbles with images and text inside them. Would anyone be able to provide guidance on how to achieve this? Or direct me to resou ...

Associating checkbox options with an array that is void of elements

I have a series of arrays linked to checkboxes and I am trying to create a unique array based on the selected checkbox values. Here is an example of the HTML structure: <input type="checkbox" value="value1">Value 1 <input type="checkbox" value=" ...

What methods are available to load sections of a complex SVG shape asynchronously?

I'm currently in the process of creating a website with a geographic map built using SVG, pulling data from OpenStreetMap. Due to its large size and potential for transformations such as zooming and moving, only a portion of it will be visible on the ...

hyperlinked text that automatically updates with the current date (using metarefresh)

I want to insert a date variable into a URL based on the current date. Specifically, I am looking to create a link from SharePoint that directs a user to the relevant files in a shared drive. My initial idea is to use an HTML page with a meta refresh that ...

Tips on utilizing toggleClass to display only the currently active item and obtaining the active class name

I am new to Jquery and CSS/scss and I have successfully created a dynamic boostrap card that resembles a record player. The goal is to generate multiple boostrap cards based on the data in DB, but for simplicity, I am showing only 2 examples below. My ques ...

jquery conflict between parent div hover function and child's hover function

I am experiencing an issue with a hover function on a parent element and child event. It seems that the child hover function is not working when hovering over the parent. Specifically, I have set up a hover function on both the "univ" div and the "heading ...

Tips for inserting an icon alongside a list item in HTML

https://i.sstatic.net/sTWRu.png Can you help me with adding an icon to a list item using Font Awesome or any other method? I want the icon to appear on the right side of the text. I have four sections of text that I want to convert into expandable dropdow ...

Tips for utilizing CSS to position a semi-circle in the middle of an image

Can CSS create a half circle effect on any image? I want to achieve a half circle effect in an image using CSS. Is this possible or not? ...

Expanding space underneath for inline-block elements

Is there a way to create a page layout with inline-block elements that are vertically aligned to the top and fold into open space like floated elements do when placed below another set of inline block elements? It seems as though they follow row-like rules ...

Using a JSON file as a database for a project featuring HTML, CSS, and Vanilla JavaScript

Our task was to create a project that exclusively utilized JSON files for data storage. The data structure we were working with resembles the following: [ { "aircraftName": "Boeing 747", "departDate": 1640173020000, ...

Center Button Horizontally and Vertically with CSS Code

I really need some assistance with getting this button I made to be perfectly centered on both the vertical and horizontal axes of the page. So far, I've managed to center it horizontally, but not vertically. Any advice or guidance would be greatly ap ...

I'm noticing that my Tailwind styles don't take effect until I redefine them. What could be causing

My Tailwind classes are giving me trouble. I faced an issue when I created a new component in the directory and placed my Button component there. Whenever I restart the project in terminal, the styles do not apply to my button unless I manually define th ...

"Verifying the dimensions of the input sizes with the i

It's possible that this question has been asked before on this platform. However, I haven't come across a satisfactory answer yet. How can I adjust the size of inputs in the iCheck library? The current size is too large for my website. Css: .ic ...