How to adjust the vertical spacing between divs in a 960 grid using CSS?

I'm currently experimenting with the 960 grid css framework.

How can I eliminate the space between two divs stacked on top of each other? [referring to the gap between the blue lines in the image]

I created my CSS using the CSS generator found at . The CSS was generated for a grid with 12 columns and a width of 720 [see link below]

Here is an example of my HTML code:

<div class="container container_12">

<div class="grid_12">
    <p>
        12
    </p>
</div>


<div class="clear"></div>

<div class="grid_5">
    <p>
        5
    </p>
</div>


<div class="grid_7">
    <p>
        7
    </p>
</div>


<div class="clear"></div>

<div class="grid_3">
    <p>
        3
    </p>
</div>


<div class="grid_9">
    <p>
        9
    </p>
</div>


</div>

Answer №1

The vertical space in the divs is caused by the margin on the P tags. Simply adjust the margin to zero with container div p {margin:0} and the space will disappear.

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

Create a static div and a separate scrolling div

I am looking to achieve a layout where the top div is fixed at the top of the screen and the second div is scrollable below it. Both divs should have the same column width. I attempted to use position: fixed, but the columns are not aligned directly benea ...

The identification of the field is not being transmitted by ng-select

Looking for help with Angular! I have an ng-select box where I can choose countries, and it's working fine when I select an option and submit - it submits the id as expected. However, when pre-populating the ng-select with data and submitting, it&apos ...

Reduced complications with mixin scopes

I have developed a parametric mixin that utilizes a unique "node-value" system to locate the children of an element. The process involves detecting the children through a loop function named ".extractArrays", which contains ".deliverChild" within it. Subse ...

Troubleshooting: How to Fix Missing Sum Display in HTML Input Fields

I am new to the world of website programming and I am currently working on creating a basic sum equation using two input fields from the client-side. <!DOCTYPE html> <html> <head> </head> ...

Creating AngularJS variables with dependencies on integer values

Hello, I am a brand new developer and I am currently working on creating an expenses calculator. The goal is to have the sum of inputted integers from a table, each with a default value, become the integer value of another variable. However, I seem to be m ...

The location of the footer is not aligned correctly

Recently, I encountered an issue that has left me puzzled. The problem is that the footer on my webpage is appearing between the calendar button and the calendar itself. Here is a snippet from my calendar.html file: {% extends 'base.html' %} {% ...

The form within the dynamically loaded AJAX content is malfunctioning

My webpage is set up to load content from a separate file (content.php) into a div and refresh it every 5 seconds. In the content.php file, I have a form (basic HTML without javascript) that works fine when accessed directly at (example.com/content.php). ...

Explore the interactive feature of hovering over a component within a div that is enhanced with a transformative translate3d effect upon hover. Discover the seamless event queuing

Within a div, there is a modal component that includes a transform: translate3d effect with hover transition. The div is created using vue.js list rendering method. Upon opening the modal and hovering over it, it jerks between the parent div and its intend ...

The 'utf-8' codec is unable to interpret the byte 0x96 at position 227, as it is an invalid start byte

Recently, I began working with Django. Unfortunately, I encountered an error that I haven't been able to solve. Can anyone explain why this error is occurring? Specifically, I am utilizing {% extends "base.html" %} on my login page. Here is the exa ...

Ways to widen the header to fit the entire page?

I'm having trouble stretching my header to fill the entire page. I've tried using margin-left and right, but it's not working as expected. My Header CSS: background: green; height: 70px; width: 100%; display: flex; just ...

Using PHP, JavaScript is unable to hide <div> elements

I'm encountering an issue where the div I want to show when an error occurs is not hiding and showing properly using JavaScript. Here is a snippet of my code: <script> function hideerror() { var catdiv = document.getElementById(error); ...

displaying a confirmation alert upon unchecking a checkbox using javascript

I am trying to implement a feature where a message saying "are you sure?" pops up when the user tries to uncheck a checkbox. If they choose "yes", then the checkbox should be unchecked, and if they choose "no" it should remain checked. I'm new to Java ...

Angularjs input type=number directive is malfunctioning

I have an input field with the type "number" that allows both whole and decimal numbers. However, I only want to allow whole numbers to be entered into the input. I have created a directive that works for input fields with type "text", but it does not work ...

Adjust the background color of Bootstrap 4 checkboxes

I'm trying to figure out how I can modify the background color of a Bootstrap 4 checkbox in this specific scenario. .custom-control-label::before, .custom-control-label::after { top: .8rem; width: 1.25rem; height: 1.25rem; } <link rel="style ...

Having trouble with Jquery CSS transform not functioning properly in Internet Explorer 8?

When it comes to utilizing CSS3 features that are not supported by older browsers such as IE8, I tend to apply them using jQuery instead. However, I have noticed that the CSS transform in jQuery does not work... Here is my code: http://codepen.io/vincentc ...

Resetting the width of a CSS-styled div to its default maximum width

I have a set of automatically generated div containers that contain label and data information. For example: <div class="display-label"> @Html.DisplayNameFor(model => model.BusinessPhone) </div> <div class="display-field"> @H ...

Tips for aligning an icon vertically within a span tag

I have a span similar to this: <span class="indicator"></span> Sometimes this span contains numbers like: <span class="indicator"> <span>10</span> </span> Other times it may display Kendo-UI icons, such as: < ...

Using the Chrome WebDriver for Selenium to interact with a text input element with dynamically changing IDs

I seem to be encountering difficulties with accessing an input element on a specific webpage. If the link has timed out, you can click on this following link: and then select the "RL_reactors" hyperlink to navigate to the page in question. On this page, ...

Attempting to showcase the text within an <a> element on a <canvas> element while ensuring there are no noticeable visual distinctions

Imagine having this snippet of code on a webpage: elit ac <a href="http://www.ducksanddos/bh.php" id='link'>Hello world!</a> nunc Now, picture wanting to replace the <a> tag with a <canvas> element that displays the same ...

Dynamically change the fill color of an SVG using styled-components

I've been attempting to target the fill property of my SVG using CSS in styled-components without any luck. Here is my SVG: <svg width="65" height="19" viewBox="0 0 65 19" fill="none" xmlns="http://www. ...