css-position


how to create adjustable gap between elements (div)


im trying to create an even and adjustable gap between divs but i can find an elegant way to do so. thanks for your help.
how i dont want it
and how i want
this is the only way i found in order to create the gap but im sure there is a better way.
#big {
height: 500px;
width: 500px;
border: 1px solid #FF0000;
border-radius: 5px;
margin:auto;
position:relative;
top:;
right:
left:
}
.small {
height: 50px;
width: 100px;
border: 1px solid #FF0000;
border-radius: 5px;
background-color: #308014;
margin:4px;
position:relative;
top:150px;
left:200px;
}
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title>Result</title>
</head>
<body>
<div id="big">
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
</div>
</body>
</html>
Either u can give margin-bottom or padding-bottom but for last div margin bottom is not necessary.
so you can try
.small{
margin: 0 0 4px 0
}
.small:last-of-type{
margin-bottom:0;
}

Related Links

Why “POSITION:RELATIVE” messes up things?
div containing absolute img has zero height
Need static menu when overflow-x:scroll
How can I put a section under cross-fade background section
Content div nex to fluid fixed div
Where does this distance difference come from
Absolute position relative to some arbitrary element
Relative positioning of custom controls with OpenLayers 3
How to set div height with relative position as child div with absolute position using css?
I'm trying to put a fixed divsion at the top of the page but when I scroll with FF, lines are lost
fixed position z-index not working
how to create adjustable gap between elements (div)
How to properly apply a css hack for IE11 transition misbehaviour
How do you make leaflet popup window full screen on small screens?
Fix a div to the bottom while scrolling with skrollr
Sticky Footer at bottom of PAGE, not just bottom of WINDOW

Categories

HOME
cobalt
hyperlink
camera
pclxl
knitr
grafana
permissions
visual-studio-emulator
mvc5
elasticsearch-5
ibeacon-android
emoji
google-form
automatic-ref-counting
selenium-ide
frequency-distribution
cumulocity
wolframalpha
sse
connector
gmm
jquery-ias
systemtime
angular-routing
xunit
angularjs-components
subclass
bioinformatics
google-cast
panoramas
dumpbin
indy10
arduino-ide
graphhopper
dm-script
c9.io
vmware-fusion
dcmtk
double-click
flask-restful
rserve
activeperl
edit
filehandle
otp
django-1.10
rxtx
pytables
redbeard-ios
envi
gogs
eigenvector
jtwig
cda
redis-cluster
ikiwiki
html-to-pdf
findfirst
invoke-sqlcmd
exim4
user-management
rasterize
avisynth
xenomai
django-urls
video-player
toolkit
rpart
iced-coffeescript
airbrake
apache-commons-daemon
keyup
shopizer
xmltype
apache-spark-1.3
execve
mruby
universal-image-loader
ora-00904
sbcl
ora-06550
c++builder-xe5
away3d
model-driven-development
dtmf
hidapi
dopostback
fragmenttransaction
jquery-blockui
catransform3d
mysql-error-1205
multiplatform
strsep
alsb
application-planning
sqlobject

Resources

Mobile Apps Dev
Database Users
javascript
java
csharp
php
android
MS Developer
developer works
python
ios
c
html
jquery
RDBMS discuss
Cloud Virtualization
Database Dev&Adm
javascript
java
csharp
php
python
android
jquery
ruby
ios
html
Mobile App
Mobile App
Mobile App