Help removing space

[houseplant]

i have large spaces below and above them?? how do i fix this

[nobr]
[CLASS=border]
border: 4px solid #D3D3D3;
height:500px;
width:300px;
[/class]

[class name=Tabs]
display:inline-block;
color:black;
background:white;
width:125px;
height:25px;
[/class]

[class name=tab1]
display:inline-block;
cursor:pointer;
width:225px;
height:25px;
left:30px;
top:305px;
position:relative;
border:1px solid grey;
[/class]

[class name=tab2]
display:inline-block;
cursor:pointer;
width:225px;
height:25px;
left:30px;
top:345px;
position:relative;
border:1px solid grey;
[/class]

[class name=tab3]
display:inline-block;
cursor:pointer;
width:225px;
height:30px;
position:relative;
left:30px;
top:385px;
border:1px solid grey;
[/class]

[class=tabcontent1]
height:500px;
width:560px;
text-align: justify;
cursor:url(https://i.imgur.com/EpbTpoA.png?1),auto;
[/class]

[class=tabcontent2]
height:500px;
width:560px;
text-align: justify;
cursor:url(https://i.imgur.com/EpbTpoA.png?1),auto;
[/class]

[class=tabcontent3]
height:500px;
width:560px;
text-align: justify;
cursor:url(https://i.imgur.com/EpbTpoA.png?1),auto;
[/class]

[script class=tab1 on=click]
hide tabcontent2
hide tabcontent3
show tabcontent1
show box
addClass Tabs
[/script]

[script class=tab2 on=click]
hide tabcontent1
hide tabcontent3
show tabcontent2
show box
addClass Tabs
[/script]

[script class=tab3 on=click]
hide tabcontent1
hide tabcontent2
show tabcontent3
show box
addClass Tabs
[/script]



[class=box]
border:4px solid #D3D3D3;
height:500px;
width:565px;
left: 390px;
top:-510px;
position: relative;
display:none;
[/class]

[class=img1]
    width:150px;
    height:150px;
    background-image: url('https://66.media.tumblr.com/02ad23302685679e50dec7d5f8d5616a/tumblr_p3y7tiIYeE1v8miobo1_1280.jpg');
    background-size:100%;
    position:relative;
    top:200px;
    left:80px;
    border:4px solid #D3D3D3;
    border-radius:50%;
    margin-top: 200px;
[/class]

[class name=img1 state=hover]
  background-image: url('https://66.media.tumblr.com/68ae39e9986b9a51c68c664054e95cb6/tumblr_p3y7tiIYeE1v8miobo2_1280.jpg');
   transition-duration: 0.4s;
[/class]

[class=quote]
size:3px;
background:white;
width:60px;
height:30px;
top:178px;
left:56px;
position:relative;
[/class]

[class=title]
height:20px; 
width:200px;
background: white;
color: #003366;
text-shadow:2px 2px 2px pink;
font-size: 12px;
letter-spacing: 2px;
position:relative;
left:200px;
[/class]
[/nobr]
[nobr]
[div class=img1][div class=quote][font=dancing script][size=2]april [i][br][/br]fools[/i][/size][/font][size=2][/size][/div][/div]

[div class=border][div class=tab1][center]Basics[/center][/div][br][/br][div class=tab2][center]Personality[/center][/div][br][/br][div class=tab3][center]Bio[/center][/div]
[/div]

[div class=box][div class=tabcontent1][div class=title][font=Pacifico][size=30]kim jiwoo[/size][/font][/div][/div]
[div class=tabcontent2]hteehtetheththeerrere[/div]
[div class=tabcontent3]hteehtetheththe[/div][/div]

[/nobr]

 

[Fable]

From an guesstimate, it has to do with all the positioning you've sorta shoved all in there.

 

[Alteras]

You should try to nest the divs into each other. This will let you get rid of all the tops and lefts you have to do and simply use margins on the scale of 1s and 10s. Such as moving your img div into your border div, in fact, make the border div encompass everything. Your code should be more like a metaphorical onion, with multiple layers of divs that help to position everything.

You're already using nobr, so don't be afraid to break up the code into multiple lines.