Creating space between elements in CSS div elements

Question

Creating space between elements in CSS div elements

I've come across numerous resources on this topic that have already been answered, but none of them have provided a satisfactory solution.

Here's the scenario:

I have created a basic fiddle showcasing the desired behavior:

@ See fidlle

If I have 3 cells, I want spacing only between each div. Is it possible to achieve this using just CSS?

[HTML]

<div class="cel-1-2">
   Max Size of Objects in Cache (Shared Memory)
    <div class="cel-1-2">
        <input type="text" placeholder="foo" />
    </div>
    <div class="cel-1-2">
        <select>
            <option value="foo">bar</option>
        </select>
    </div>
</div>
<div class="cel-1-2">
    foobar
</div>

[CSS]

[class*=cel-] {
   padding-right:10px;
   -moz-box-sizing: border-box; 
   -webkit-box-sizing: border-box;     
   box-sizing: border-box;
    background: blue;
}

.cel-1-2 {
    width: 50%;
    float: left;
}

input, select {
    width: 100%;
    float: left;
}

To clarify further:

This is what I am looking for

==>Not this!

html css

Answer 1

Answer №1

Not sure what the problem is here. You can easily achieve this using CSS:

.container {
   width: 100%;
   background-color: blue;
    padding: 2em; 
    height: 600px;
}
.item {
    width: 40%;
    height: 300px;
    background-color: pink;
    float: left;
}
.item + .item {
    margin-left: 10% /* Pro Tip */
}

Check out a live demo here: http://jsfiddle.net/abc123/

Answer 2

Not sure what the problem is here. You can easily achieve this using CSS:

.container {
   width: 100%;
   background-color: blue;
    padding: 2em; 
    height: 600px;
}
.item {
    width: 40%;
    height: 300px;
    background-color: pink;
    float: left;
}
.item + .item {
    margin-left: 10% /* Pro Tip */
}

Check out a live demo here: http://jsfiddle.net/abc123/

Answer 3

Answer №2

In my opinion, a good way to handle this issue is by adding a margin-left to all child elements and then specifically resetting the margin for the first child.
http://jsfiddle.net/abc123/4/

.child {    
    display: inline-block;
    margin-left: 10px;
}

.child:first-child {
    margin-left: 0;
}

Answer 4

In my opinion, a good way to handle this issue is by adding a margin-left to all child elements and then specifically resetting the margin for the first child.
http://jsfiddle.net/abc123/4/

.child {    
    display: inline-block;
    margin-left: 10px;
}

.child:first-child {
    margin-left: 0;
}

Answer 5

Answer №3

Just dipping my toes into the world of web design, but if I understood your question correctly, here are a few suggestions:

1) Utilize bootstrap to align those divs on the same line - bootstrap will take care of the spacing automatically.

2) Avoid manually adjusting divs with the margin property, as it's not the best practice.

P.S.: I wanted to ask for some clarification before responding, but I don't quite have enough reputation yet. If this isn't relevant, feel free to disregard and I'll work on providing a more fitting answer.

Answer 6

Just dipping my toes into the world of web design, but if I understood your question correctly, here are a few suggestions:

1) Utilize bootstrap to align those divs on the same line - bootstrap will take care of the spacing automatically.

2) Avoid manually adjusting divs with the margin property, as it's not the best practice.

P.S.: I wanted to ask for some clarification before responding, but I don't quite have enough reputation yet. If this isn't relevant, feel free to disregard and I'll work on providing a more fitting answer.

Answer 7

Answer №4

If you're looking to build a website, my strong suggestion is to utilize twitter bootstrap. Not only is it simple and robust, but it is also responsive. I've tried implementing it into your code like so:

<html>
    <head>
        <title>Student Program Management</title>
        <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.css" rel="stylesheet">
    </head>
    <body>
        <div class="container">
            <div class="row">
                <p>Max Size of Objects in Cache (Shared Memory)</p>
                <div class="col-md-4 ">
                    <input type="text" placeholder="foo" />
                </div>
                <div class="col-md-4">
                    <select>
                        <option value="foo">bar</option>
                    </select>
                </div>
                <div class="col-md-4">
                    foobar
                </div>
            </div>
        </div>
    </body>
</html>

While there are other methods using simple CSS, they can often be more cumbersome than this approach. Bootstrap relies on a Grid Layout system, where the layout of your site is structured into rows (using the "row" class attribute in div elements) as desired. Within each row, columns can be added (div with the class attribute "col-md-4", for example). Each row consists of 12 columns, so in this case, I have divided it into 3 rows with one column each, resulting in every div having the class "col-md-4" because 12/3=4. This ensures uniform width for all divs. While this may not be exactly what you had in mind, utilizing frameworks like bootstrap proves to be more efficient compared to plain CSS. I highly recommend considering this shift from plain CSS when possible. For more information, visit: http://getbootstrap.com/css/#grid

Answer 8

If you're looking to build a website, my strong suggestion is to utilize twitter bootstrap. Not only is it simple and robust, but it is also responsive. I've tried implementing it into your code like so:

<html>
    <head>
        <title>Student Program Management</title>
        <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.css" rel="stylesheet">
    </head>
    <body>
        <div class="container">
            <div class="row">
                <p>Max Size of Objects in Cache (Shared Memory)</p>
                <div class="col-md-4 ">
                    <input type="text" placeholder="foo" />
                </div>
                <div class="col-md-4">
                    <select>
                        <option value="foo">bar</option>
                    </select>
                </div>
                <div class="col-md-4">
                    foobar
                </div>
            </div>
        </div>
    </body>
</html>

While there are other methods using simple CSS, they can often be more cumbersome than this approach. Bootstrap relies on a Grid Layout system, where the layout of your site is structured into rows (using the "row" class attribute in div elements) as desired. Within each row, columns can be added (div with the class attribute "col-md-4", for example). Each row consists of 12 columns, so in this case, I have divided it into 3 rows with one column each, resulting in every div having the class "col-md-4" because 12/3=4. This ensures uniform width for all divs. While this may not be exactly what you had in mind, utilizing frameworks like bootstrap proves to be more efficient compared to plain CSS. I highly recommend considering this shift from plain CSS when possible. For more information, visit: http://getbootstrap.com/css/#grid

Answer 9

Answer №5

Assign a fresh class to the center div and apply appropriate styles.

Here's a sample:

.CenteredBox{
    padding: 20px;
    background-color: #f0f0f0;
}

I trust this meets your query, although I may not have grasped it entirely.

Answer 10

Assign a fresh class to the center div and apply appropriate styles.

Here's a sample:

.CenteredBox{
    padding: 20px;
    background-color: #f0f0f0;
}

I trust this meets your query, although I may not have grasped it entirely.

Creating space between elements in CSS div elements

This is what I am looking for

==>Not this!

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Unexpected behavior observed with LitHTML when binding value to input type range

Setting Image Height with CSS

Tips on choosing additional (sibling) elements with CSS?

The expansion animation for the Nextjs/React accordion box did not work as expected when utilizing tailwindcss

Is there a way to implement a sticky footer on just a single webpage if that's all I need?

Is there a way for me to determine the total duration of a testcase's execution?

I would appreciate your assistance in the modification of the input type from text to radio within the PHP code

Tips for maintaining the particles.js interaction while ensuring it stays under other elements

Tips for choosing and deselecting data using jQuery

Using HTML5 to display the {{data}} extracted from a JSON file right in the center of the text

Attempting to arrange all the images in a horizontal display rather than a vertical one

Is it possible to display or hide a spinner within a span using Javascript and AJAX?

"Seamless responsiveness in design with jQuery, but encountering compatibility issues

Tips for choosing elements in JavaScript using querySelector even after they've been included in the code using innerHTML

Clicking within the text activates the dropdown menu, but clicking outside the text does not

The sup tag does not function properly when used within the title tag

Strange behaviors when using setinterval with classes

Achieving a seamless scrolling effect using CSS

Develop a dynamic progress bar using jQuery

The CSS3 Animation remains stationary