Geek asks and answers

Add distance between element inside html div

I need to add a larger distance between two squares in my div. How to do it in CSS?

example

+5
source share
3 answers

This should clarify the situation:

Jsfiddle

HTML

<div class="parent">
    <div class="one">
        1
    </div>
    <div class="two">
        2
    </div>
    <div class="floatClear"></div>
</div>

CSS

.parent {
    border: 4px solid black;
    padding: 20px 15px;
}

.one, .two {
    border: 4px solid black;
    height: 150px;
    width: 150px;
    float: left;
}

.one {
    margin-right: 60px;
}

.floatClear {
    clear: both;
}

Cervical !! http://jsfiddle.net/HtaFF/12/

+9
source

If you want, for example, 10 pixels between the addition margin-right: 10px;for the first square or margin-left: 10pxfor the second.

You can choose the pixels between you.

+4
source 
margin-left: 10px;
margin-right:10px;
margin-top: 10px;
margin-bottom:10px;

Or a shortcut:

margin: 10px 10px 10px 10px;

Or even a shorter path, if all your values ​​match, you can write it only once:

margin: 10px;

You really should look at a CSS tutorial like this one .

+1
source

More articles:


All Articles