Are your div tags not fitting snugly? Experiencing invisible padding issues?

I am currently working on a page with inline-block divs that extend horizontally off the screen.

Feel free to view my Codepen demonstration: http://codepen.io/gosusheep/pen/GJEPEV .

You can also see the processed output here: .

Within the #slider div, I have multiple .slide-content divs, each spanning the entire window size. As I scroll, they should transition to the next page.

My goal is to have the .slide-content divs aligned directly next to each other. Despite my efforts, there seems to be a small gap between each div, as revealed by Chrome's element inspector.

If the window size is 1000, ideally I would like the first div to be at x:0, the 2nd at x:1000, and so forth. This way, when I use $(window).scrollLeft(1000), it should position the 2nd div in the center of the screen.

However, upon adding borders to the divs to investigate the spacing issue, I noticed an undesired gap between them.

Does anyone have insights on why this is happening?

Thank you for your attention.

htmlcss

Answer №1

To address the issue of white space between divs (a line break), consider treating them as inline blocks. This will result in a space character, similar to having white space between two images. To resolve this, try placing the </div><div> immediately next to each other.

Answer №2

After reading Val's link (refer to the comment in Stephen Poley's response) on CSS-Tricks, I made the decision to focus on adjusting CSS rather than HTML. This choice was influenced by my use of HAML for HTML generation. If given the choice, I would have likely opted to eliminate the whitespace instead.

div.container{
  font-size: 0;
}

div.content{
  font-size: 16px; /*my default */
}

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

Issue with Bootstrap4: organizing columns correctly within and outside a container

I've hit a roadblock while working on a project and can't seem to find the right solution. I've already created a design in Photoshop to illustrate what I'm trying to achieve: Photoshop Design. Basically, I want the main content inside ...

cssbootstrap-4flexboxcontainersspacing

Online platform showcasing erroneous information about Bootstrap Screen Readers

I'm currently developing a new website by utilizing some code I previously wrote for an older site. However, the incorporation of slightly more advanced PHP includes seems to have resulted in different behavior on the two sites. Both sites feature a ...

phphtmlbootstrap-5

What is the best way to send information from an MVC controller to JavaScript?

Being new to programming, I am working on 2 projects that function as client-server via Rest API. I am looking to create a column chart using data from a List of ID (participant) and Votes (Total votes) obtained from the server's connection with the d ...

javascripthtmljqueryasp.net-mvcasp.net-core

What is the best way to restrict the number of iterations in ngFor within Angular HTML

I want to use ngFor to display a maximum of 4 items, but if the data is less than 4, I need to repeat the loop until there are a total of 4 items. Check out this example <img *ngFor="let item of [1,2,3,4]" src="assets/images/no-image.jpg" styl ...

htmlangulartypescript

Struggling with Dreamweaver template and library issues

As I revamp a website, Dreamweaver templates and libraries are my go-to tools for maintaining a consistent design across all pages. Almost done with the redesign, I'm now seeking feedback from colleagues. To achieve this, I attempted to copy the site ...

htmlcssdreamweaver

Passing the initial value from a PHP array to Ajax using an HTML element

I am currently dealing with an HTML form that fetches values from an array list. The form is submitted using Ajax along with a PHP script. However, I am encountering an issue where clicking on different array items only submits the first value in the array ...

javascriptphphtmljqueryajax

Error in Express application due to uncaught SyntaxError

I am attempting to live stream data using websockets to Chartjs, however I keep encountering the following error. main.js:1 Uncaught SyntaxError: Unexpected token <https://i.sstatic.net/9OCI1.png https://i.sstatic.net/bmGeW.gif What could be causi ...

javascripthtmlnode.jsexpresschart.js

Emphasizing Text Within Div Element

Imagine having a div element structured as such: <div id="test" class="sourcecode"> "Some String" </div> Can CSS and JavaScript be utilized to highlight a specific portion of that string based on a search query? For instance, if the search q ...

phpjavascriptcssstringhighlight

How come JSOUP fails to read in UTF-8 format?

I've been struggling to parse utf-8 using jsoup. I've tried everything I know and even searched on Google. My goal is: String tmp_html_content ="Öç"; InputStream is = new ByteArrayInputStream(tmp_html_content.getBytes()); Documen ...

javahtmlutf-8jsoup

What is the best way to incorporate Bootstrap 5 into a content script without causing any conflicts with the existing CSS of the website? (Chrome Extension)

In the process of integrating the Bootstrap 5 library into a Chrome extension, I have encountered an issue where the CSS and JS files conflict with the main CSS file on certain websites. To address this, I have included the Bootstrap 5 (CSS and JS) files i ...

javascriptcssgoogle-chrome-extensionbootstrap-5

Using the identical code, Wicked PDF generates distinct reports on separate computers

While utilizing Ruby on Rails to render a PDF using WickedPDF and sending it via email, I encountered an unexpected issue. The same code is present on two separate computers, both with up-to-date versions synced from GitHub. However, the generated PDF repo ...

htmlcssruby-on-railswicked-pdf

Web page containing information from IPv6 and IPv4 sources exclusively

Is it possible to have an HTML5 page accessible through both IPv4 and IPv6, while only allowing CSS style and JavaScript from other domains via IPv4? Unfortunately, it seems that this setup does not function properly for pure IPv6 connections. Will th ...

javascriptcsshtmlipv6

Utilizing PHP for Substituting URLs within HTML

Is there a way to use PHP to eliminate an entire <iframe> tag that contains the link abc.com? If I searched the following code for abc.com: ‹iframe src="http://abc.com/abcd.html"›‹/iframe› ‹iframe src="http://abc.com/lmno.html"›‹/ifr ...

phphtmlurl

Question about the origin of style sheet source files [*.css?ver=]

Can you explain the purpose of appending a query string to the end of a style sheet? I frequently come across examples like this: some-stylesheet.css?ver=1.2.3 Appreciate your insights. ...

css

Tips for choosing elements based on a specific attribute (such as fill color) in D3.js using the SelectAll method

I have various sets of circles on a map - 10 red circles, 10 blue circles, and 10 green circles. Is there a way to use d3 selectAll or select to specifically choose only the red circles? Are there any alternative methods for achieving this? The color of ...

javascriptcssd3.js

How come an absolutely positioned element does not disregard its sibling's position and appears after it?

<div> is styled flexibly, while <section> is inserted within it and formatted statically. However, <section> shows up underneath the lower right corner of the image, rather than at the upper left corner of its flexible parent. I am strugg ...

csscss-position

Is it possible to incorporate a React app as a component within a static HTML page?

Looking to integrate the react-csv-viewer component into a static HTML page without deploying it on a local server. I've tried following the instructions from the React tutorial, but am struggling with the build process. My goal is simple - to use th ...

javascripthtmlreactjsnpmbuild

Certain rows in the table should maintain a consistent width, while others are allowed to vary

I am dealing with a table containing certain rows Some of these rows are visible, while others are hidden. The visible rows at the start are referred to as: mainTrs. Clicking on a visible row will make all rows with a class matching its id visible. Cli ...

javascriptjquerycsshtml-table

What is the best way for a client to showcase a constantly fluctuating server-side variable's value?

On my website's homepage (index.html), I want to show a dynamic server-side global variable called serverVariable. This variable is always changing based on the node.js server-side code. However, since the client doesn't know what serverVariable ...

javascripthtmlnode.js

What is the method for incorporating more outer space into an inline SVG?

I have a situation where I am using an inline SVG with a transparent fill and a dark stroke. The aim is to change the fill color to dark when hovered over. However, increasing the stroke-width to make the stroke more visible causes it to extend beyond the ...

csssvginline-svg