Tips for eliminating any default white space visible between tags:

What is the best way to eliminate white space gaps between div tags and adjust pixel differences between them in HTML code? My current alignment is off and there are noticeable white spaces between div tags.

I have tried using a reset link but it didn't work to remove the white space between div tags.

This is my CSS:

* {
  margin: 0px;
  padding: 0px;
}

.phase-name {
  display: inline-block;
  width: 80px;
  text-align: center;
  padding: 7px;
  vertical-align: top;
}

<!-- More CSS Code Here -->
jqueryhtmlcss

Answer №1

Is there a specific reason for choosing DIV elements over tables in this case? The same layout could be easily achieved with a table structure. I quickly put together a sample table using tablesgenerator.com, but keep in mind you might need to adjust the cell styling and widths.

Check out the table I created

<style type="text/css>
.tg  {border-collapse:collapse;border-spacing:0;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:black;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:black;}
.tg .tg-c82p{background-color:#fffe65;border-color:inherit;text-align:center;vertical-align:top}
.tg .tg-c3ow{border-color:inherit;text-align:center;vertical-align:top}
.tg .tg-4f0n{background-color:#000000;color:#ffffff;border-color:inherit;text-align:center;vertical-align:top}
.tg .tg-dx7k{background-color:#656565;border-color:inherit;text-align:center;vertical-align:top}
.tg .tg-llyw{background-color:#c0c0c0;border-color:inherit;text-align:left;vertical-align:top}
.tg .tg-0pky{border-color:inherit;text-align:left;vertical-align:top}
</style>
<table class="tg">
  <tr>
    <th class="tg-llyw" colspan="2"></th>
    <th class="tg-llyw" colspan="2"></th>
    <th class="tg-llyw" colspan="2"></th>
    <th class="tg-c82p" colspan="10">Week 1</th>
    <th class="tg-c82p" colspan="4">Week 2</th>
  </tr>
  <tr>
    <td class="tg-4f0n" colspan="2">PHASE</td>
    <td class="tg-4f0n" colspan="2">ABR</td>
    <td class="tg-4f0n" colspan="2">TYPE</td>
    <td class="tg-c82p" colspan="2">1</td>
    <td class="tg-c82p" colspan="2">2</td>
    <td class="tg-c82p" colspan="2">3</td>
    <td class="tg-c82p" colspan="2">4</td>
    <td class="tg-c82p" colspan="2">5</td>
    <td class="tg-c82p" colspan="2">1</td>
    <td class="tg-c82p" colspan="2">2</td>
  </tr>
  <tr>
    <td class="tg-llyw" colspan="2"></td>
    <td class="tg-llyw" colspan="2"></td>
    <td class="tg-llyw" colspan="2"></td>
    <td class="tg-c82p">Reps</td>
    <td class="tg-c82p">%</td>
    <td class="tg-c82p">Reps</td>
    <td class="tg-c82p">%</td>
    <td class="tg-c82p">Reps</td>
    <td class="tg-c82p">%</td>
    <td class="tg-c82p">Reps</td>
    <td class="tg-c82p">%</td>
    <td class="tg-c82p">Reps</td>
    <td class="tg-c82p">%</td>
    <td class="tg-c82p">Reps</td>
    <td class="tg-c82p">%</td>
    <td class="tg-c82p">Reps</td>
    <td class="tg-c82p">%</td>
  </tr>
  (Additional table rows and cells...)
</table>

Answer №2

Utilize the CSS property `float:left` to position consecutive `div`s side by side.

Alternatively, consider implementing Bootstrap's grid system for a more organized layout -> https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp

Give this approach a try.

View a working example on Codepen: -> https://codepen.io/anon/pen/VEXKJe

 $(document).on('click', '.phase_button', function (e) {
                e.preventDefault();
                $('.paste_row_button').append('<button class="row_button">Rows-' + ++$(".row_button").length + '</button>');
                $('.phase-container').append($(".structure").clone().removeClass("structure hide"));
            });
            $(document).on("click", ".row_button", function () {
                $(".phase").eq($(".row_button").index($(this))).css({"display": "flex", "border-left": "1px solid #ddd", "border-right": "1px solid #ddd"}).find(".type-container").append($(".structure .type").clone());
            });
            $(document).on("click", ".week_button", function () {
                console.log($(".phase-header-1 .week:first").clone());
                $(".phase-header-1 .week-container").append($(".phase-header-1 .week:first").clone());
                $(".phase-header-2 .week-container").append($(".phase-header-2 .week:first").clone());
                $(".phase-header-3 .week-container").append($(".phase-header-3 .week:first").clone());
                $(".phase").find(".week-container").append($(".structure .week:first").clone());
            });
        $(".phase_button").click(); 
    * {
      margin: 0px;
      padding: 0px;
    }
   .week .day{float:left;}
   .week .day .reps{float:left;}
    .phase-name {
      display: inline-block;
      width: 80px;
      text-align: center;
      padding: 7px;
      vertical-align: top;
    }

    .type-container {
      display: inline-block;
    }

    ....(CSS code continued)

Hope this guidance proves beneficial.

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

Creating a JSON hierarchy from an adjacency list

I am currently working with adjacency data that includes ID's and Parent ID's. My goal is to convert this data into hierarchical data by creating nested JSON structures. While I have managed to make it work, I encountered an issue when dealing ...

javascriptjqueryarraysjson

The arrangement of <source> tags within the <audio> element can cause issues with browser compatibility

I'm having a slight issue with the audio files on my webpage. I've set up both MP3 and Ogg Vorbis files using FFmpeg to ensure compatibility with modern browsers. However, I've noticed that Safari only plays the audio when the MP3 file is li ...

htmlaudio

What is the best way to open the index.html file in electron?

I'm currently developing a cross-platform app using electron and Angular. As of now, the code I have for loading my index.html file looks like this: exports.window = function window() { this.createWindow = (theBrowserWindow) => { // Create ...

javascripthtmlelectronload

Having difficulty in closing Sticky Notes with JavaScript

Sticky Notes My fiddle code showcases a functionality where clicking on a comment will make a sticky note appear. However, there seems to be an issue with the Close Button click event not being fired when clicked on the right-hand side of the note. I have ...

javascriptjqueryhtmlcssckeditor

Utilize Angular Material to assign the value of a mat-select component based on the FormControlName property

I am using Angular version 7 and have encountered an issue with a form I am creating. The form includes a dropdown select to choose an option, but when the page loads, the pre-defined value is not showing up. This page is specifically designed for editing ...

htmlangularangular-material

How can you refresh the .replaceWith method in jQuery?

Is there a way to reset the .replaceWith function so that the html, css and javascript elements are restored to their original state? I am looking to have an icon replace the text when the user clicks on "contact", and then have the text return when the u ...

javascriptjqueryhtmlcssreplacewith

Demonstrating information using a HighCharts pie graph in a Visual Studio web application

Here is a snippet of code that supplies data for the chart within the View: series: [{ type: 'pie', name: 'Chart Title', data: @Html.Raw(Json.Encode(Model)) }] This piece of code can be foun ...

jquery.netjsonasp.net-mvc-4highcharts

How can you utilize the Array submission syntax within HTML coding?

I currently have numerous input fields within a form, and some of them are structured like this: <input name="agents[]" type="file" /> Additionally, imagine there is a plus button next to this field as shown below: <img src="plus.jpg" id="some_ ...

javascriptphpjqueryhtmlajax

Retrieving an array of objects from the database utilizing AJAX

I am trying to retrieve comments from a database and display them on my webpage. However, the current code is throwing a syntax error because the PHP file is not returning the JSON file properly. Here is a snippet of my PHP code (just the fetching part, n ...

phpjqueryajax

Modify just one of the padding axis while keeping the other constant by utilizing a media query

My div currently has the following padding set: padding: 14px 150px; I want to change the left/right padding without affecting the top/bottom padding using a media query. @media screen and (max-width: 700px){ #paddingDiv{ padding: same as ...

css

The select2 ajax functionality encountered an error: Uncaught TypeError - Unable to access the 'context' property as it is undefined

Trying to make an AJAX request using the Select2 jQuery plugin. The query appears to be functioning properly, but the problem arises when ".context===undefined" is called on the "data" object: Uncaught TypeError: Cannot read property 'context' o ...

javascriptjqueryajaxjquery-select2

Customize Your Lists in Wordpress to Reflect Your Unique Style

I need help with styling a specific text widget in Wordpress by adding a FontAwesome icon as a list bullet. I have the following CSS code: .covenant li { counter-increment: my-awesome-counter; margin: 0.25rem; } .covenant li:before { font-family: 'Fo ...

htmlcss

Unable to get jQuery waypoints to function on local server

Currently, I am working with jQuery. I downloaded an example shortcut for infinite scroll from jQuery Waypoints and tried to use it. However, when the page reaches the end, the web console displays the following error: XMLHttpRequest cannot load file:// ...

javascriptjquery

Experiencing an issue with referrer: The global symbol needs an explicit package name

my $refer = $ENV{HTTP_REFERER}; my $gk1 = substr($str1, -4); if ($gk1 = .swf) { my $antigk = "gk detected"; } else { my $antigk = $link; } I am encountering issues with this code after making some modifications. What could be causing the errors? I ...

htmlperl

Enhancing user interfaces with jQuery by updating DOM elements

Can anyone help me figure out how to update a webpage so it functions as a report that multiple people can contribute to? I'm using forms to collect data and want it to instantly display under the correct category headings. Currently, I'm using j ...

javascriptjqueryhtml

TradingView widget chart embedded within a web page is failing to display when hosted on X

I am having trouble displaying a TradingView widget. When I embed the widget in an HTML file and open it in a regular browser, the chart shows up fine. However, when I embed the widget in a PHP or HTML file and try to open it using xampp, the browser doesn ...

phphtmlxampp

Utilize Javascript to extract and showcase JSON data fetched from a RESTful API

I'm attempting to use JavaScript to pull JSON data from a REST API and display it on a webpage. The REST call is functioning correctly in the Firefox console. function gethosts() { var xhttp = new XMLHttpRequest(); xhttp.open("GET", "https://10 ...

javascripthtmljsonajaxrest

Set the cookie to expire in 5 minutes using PHP, JavaScript, or jQuery

Is there a way to set a cookie in PHP that expires in 5 minutes? I am comfortable with the setcookie() function, but unsure about how to set the expiration time. Any explanation would be greatly appreciated. Could someone please guide me on how to achieve ...

phpjavascriptjquerycookiessetcookie

Using jQuery Accordion within the MVC Framework

I'm new to MVC and considering using an accordion. However, I'm facing issues as the accordion does not appear despite adding all necessary references for jquery accordion and creating the div. Here is my code: @{ ViewBag.Title = "Online Co ...

javascriptjqueryhtmlcssasp.net-mvc

Tips for displaying or concealing data in table cells in Google Charts

Using a Google charts table to display server exceptions, but the errors are too long for cells. How can I show only an excerpt of error messages in each cell with a + expansion sign for full details in a modal box on click? I have successfully implement ...

javascriptjqueryhtmlgoogle-visualization