What is the best way to create padding for divs in 960gs without relying on an inner div?

Question

What is the best way to create padding for divs in 960gs without relying on an inner div?

I'm currently working with 960gs and facing the challenge of adding padding to div elements without resorting to using an additional inner div.

When I attempt to add padding directly to the main div, it disrupts the layout established by 960gs. The only solution I've come up with involves nesting another div inside and applying the padding to that nested element.

While this workaround does resolve the issue, I personally find it redundant to have a second div solely for padding purposes. Are there any alternative approaches that can be explored?

html css

Answer 1

Answer №1

Is box-sizing functioning as expected?

https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

div {
    width: 100px;
    box-sizing: border-box;
}

border-box The width and height properties now include padding and border, but not margin. This is the box model utilized by Internet Explorer when in Quirks mode.

Answer 2

Is box-sizing functioning as expected?

https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

div {
    width: 100px;
    box-sizing: border-box;
}

border-box The width and height properties now include padding and border, but not margin. This is the box model utilized by Internet Explorer when in Quirks mode.

Answer 3

Answer №2

One common issue with grid systems is the padding problem, which unfortunately doesn't have a straightforward solution. The best workaround is to add extra markup, such as an inner div without a "grid_xx" class.

If you're up for some extensive coding, you can also apply padding directly to the child elements. Here are the two approaches:

<div class="grid_12">
 <div class="inner_div" style="padding:10px">
  <p>This is some sample text</p>
 </div>
</div>

Alternatively, you can skip the inner div and style the child elements like this:

<div class="grid_12">
 <p style="padding:10px">This is some sample text</p>
</div>

You could use CSS instead of inline styles, but the concept remains the same :)

I hope this information proves helpful.

You might also want to explore the Blueprint or YUI CSS frameworks, although they may encounter similar padding issues.

Answer 4

One common issue with grid systems is the padding problem, which unfortunately doesn't have a straightforward solution. The best workaround is to add extra markup, such as an inner div without a "grid_xx" class.

If you're up for some extensive coding, you can also apply padding directly to the child elements. Here are the two approaches:

<div class="grid_12">
 <div class="inner_div" style="padding:10px">
  <p>This is some sample text</p>
 </div>
</div>

Alternatively, you can skip the inner div and style the child elements like this:

<div class="grid_12">
 <p style="padding:10px">This is some sample text</p>
</div>

You could use CSS instead of inline styles, but the concept remains the same :)

I hope this information proves helpful.

You might also want to explore the Blueprint or YUI CSS frameworks, although they may encounter similar padding issues.

What is the best way to create padding for divs in 960gs without relying on an inner div?

Answer №1

Answer №2

Similar questions

Turning a multi-row table header into div elements using Javascript

Selective Circle Appending Techniques

What are some tips for designing HTML email templates?

Bootstrap 4 Dropdown Menu not displaying on website

What is the Best Way to Send Multiple Values using a Single Submit Button?

Guide to creating uniform width for asp:buttons using bootstrap and css

a:hover CSS style altering the behavior of buttons with images in a web browser

The input field or help text fails to change to a red color when the field contains invalid information

CSS briefly displays overridden styles before applying the final styling

Generating dynamic HTML content in React using a variable within a string

What is the best way to declare variables in an HTML document that can be accessed by an external JavaScript file when including the JavaScript code in the HTML?

Ways to automatically display the Nebular Accordion using NgFor

JavaScript - Shuffle Cards Memory Game Function

Guide to reordering elements (radio buttons) retrieved by jQuery selector

AngularJS allows us to easily include the route provider templateUrl path in the view div, making

How to line up scrollable tables columns with the header using CSS

Facing a selection list issue on a web application built with Flask and Vue.js

Is there a solution or workaround for the issue of fake anti-aliasing in Microsoft Edge when it comes to the border of sticky headers using Bootstrap 4?

Is it possible to modify the menu design for a specific page?

Exploring Javascript parameters with the power of jquery