give space above and below a DIV
You use the CSS padding property. In your case you might want to use padding-topand padding-bottom alone.
The syntax is the following:
padding: top right bottom left;
or
padding: vertical horizontal;
Some examples:
// This will set the top space to 1px, the right to 2px the bottom to 3px
// and the left to 4px
.input {
padding: 1px 2px 3px 4px;
}
// This will set both the top and the bottom to 20px and the right and the
// left to 10px;
.input {
padding: 20px 10px;
}
// This will set only the bottom space, leaving everything else
// to be automatically determined
.input {
padding-bottom: 20px;
}
Read more about the HTML Box Model
Extra space below div element
The reason it happens is p tags have an auto margin. More info here
Extra space above and below text div that's not marked as padding or margin
https://jsfiddle.net/yk79ed9q/1/
It's because you specified a height of 110px for textDiv
.mainDiv {
display: table;
padding-top: 4px 2px;
border: 1px solid black;
width: 100%;
height: 120px;
}
.textDiv {
display: table-cell;
border: 1px solid black;
margin: 0px 2px;
text-align: center;
height: 110px;
padding: 0px;
overflow: hidden;
}
The content height of the text "The Lang school .." is 54 px.
110-54 = 56. (The extra height that is added after the text content height)
120+56 = 176. (Height of main div + the extra height)
Remove height:110px if you want your main div to be 120px.
How to add space between a div and the bottom of the page
Just use margin-top instead of top, that way that distance is added at the top instead of the div just being moved by that value, in relation to its original position in the document flow (which doesn't extend the height of the parent element).
div {
background-color: grey;
position: relative;
margin-top: 136px;
}<div>
<p>Lorem Ipsum<br>Lorem Ipsum<br>Lorem Ipsum<br>Lorem Ipsum<br>Lorem Ipsum<br>Lorem Ipsum<br>Lorem Ipsum<br>Lorem Ipsum<br>Lorem Ipsum<br>Lorem Ipsum<br>Lorem Ipsum<br>Lorem Ipsum<br>Lorem Ipsum<br>Lorem Ipsum</p>
</div>Adding space to the top and bottom of a div
Use padding-top, and padding-bottom to create the white space.
For example:
.next {
font: 23px "Play";
position: relative;
margin-left: 605px;
padding-top: 300px;
padding-bottom: 300px;
}
Will add 300 pixels on top and underneath the "next" link.
Extra space above and below links in divisions that I can't get rid of?
If I understand the problem, what you're seeing is the default margin on the h5. You've defined padding: none; margin: none; which would get rid of that margin... if none were a valid value for margin/padding, but it isn't, so those lines are being ignored in your stylesheet. Change that to 0 instead. And if you want the links to be right on top of one another, remove the <br> and add clear: left; to .link, and if you want to create vertical space, use margin or padding. I also removed line-height: 5% because that was messing up the element's height and causing the text to stack on top of one another.
html { background-color: #05061A; min-height: 200%;}
h1 { font-family: 'Lato Bold 700', sans-serif; font-size: 7.20vw; background: -webkit-linear-gradient(top, #D2DFF0, #7D81BE, #05061A); background: -moz-linear-gradient(top, #D2DFF0, #7D81BE, #05061A); background: -o-linear-gradient(top, #D2DFF0, #7D81BE, #05061A); background: linear-gradient(to bottom, #D2DFF0, #7D81BE, #05061A); -webkit-background-clip: text; -webkit-text-fill-color: transparent; padding: none; margin: 0%; text-shadow: 0 0 1px transparent; transition: text-shadow 0.35s ease; -webkit-stroke-width: 5.3px; -webkit-stroke-color: transparent; -webkit-fill-color: transparent;}
h1:hover { text-shadow: 0 0 1px #D2DFF0; transition: text-shadow 0.35s ease; -webkit-stroke-width: 5.3px; -webkit-stroke-color: #FFFFFF; -webkit-fill-color: #FFFFFF;}
h3 { font-family: 'Pontano Sans', sans-serif; font-size: 1.60vw; color: #7D81BE; text-decoration: none; -webkit-transition: color 0.10s; -moz-transition: color 0.10s; -ms-transition: color 0.10s; -o-transition: color 0.10s; transition: color 0.10s; padding: none; margin: 0px;}
h3:hover { color: #D2DFF0;}
h4 { color: #7D81BE; font-family: 'Pontano Sans', sans-serif; font-size: 1vw;}
h5 { color: #7D81BE; font-family: 'Pontano Sans', sans-serif; font-size: 1vw; padding: 0; margin: 0;}
h5:hover { color: #D2DFF0;}
h6 { color: #7D81BE; font-family: 'Pontano Sans', sans-serif; font-size: 0.8vw;}
h7 { color: #D2DFF0; font-family: 'Pontano Sans', sans-serif; font-size: 1.60vw; padding: none; margin: none;}
h8 { font-family: 'Pontano Sans', sans-serif; font-size: 1.40vw; color: #D2DFF0; text-decoration: none; -webkit-transition: color 0.10s; -moz-transition: color 0.10s; -ms-transition: color 0.10s; -o-transition: color 0.10s; transition: color 0.10s; position: absolute; margin-top: -5%; margin-left: -10.9%; min-width: 15vw;}
p { color: #D2DFF0; font-family: 'Pontano Sans', sans-serif; font-size: 1.1vw; margin-top: none; margin-bottom: none;}
a { font-family: 'Pontano Sans', sans-serif; color: #7D81BE; text-decoration: none; -webkit-transition: color 0.10s; -moz-transition: color 0.10s; -ms-transition: color 0.10s; -o-transition: color 0.10s; transition: color 0.10s;}
a:hover { color: #D2DFF0;}
a:visited { color: #7D81BE;}
div { padding: 0%; margin: 0%;}
#sidebar { text-align: center; align-content: center; width: 22%; height: auto; float: left; top: 6%; left: 4%; position: fixed; background: -webkit-linear-gradient(bottom, #0C1033, #05061A); background: -moz-linear-gradient(bottom, #0C1033, #05061A); background: -o-linear-gradient(bottom, #0C1033, #05061A); background: linear-gradient(to top, #0C1033, #05061A);}
#sidebarart { padding: 0% 5% 0% 5%; margin: 0px; width: 80%; height: auto;}
#gallery { width: 70%; height: auto; position: relative; float: right; top: 0px; bottom: 0px; left: 0px; right: 4vw; align-content: center; text-align: center;}
.album { display: block; padding: none; margin: 5% 5% 20% 5%; max-width: 90%; height: auto; overflow: auto; -webkit-box-shadow: 0px 0px 30px 4px #05061A; -moz-box-shadow: 0px 0px 30px 4px #05061A; box-shadow: 0px 0px 30px 4px #05061A; transition: box-shadow 0.60s ease; border: 2px solid blue;}
.album:hover { -webkit-box-shadow: 0px 0px 30px 4px #D2DFF0; -moz-box-shadow: 0px 0px 30px 4px #D2DFF0; box-shadow: 0px 0px 30px 4px #D2DFF0; transition: box-shadow 0.35s ease;}
/* Dropdown Button */
.dropbtn { position: relative; background-color: transparent; padding: 0px; border: none; cursor: pointer; display: block; margin-left: auto; margin-right: auto; width: 30%;}
/* The container <div> - needed to position the dropdown content */
.dropdown { position: relative; display: block; float: inherit; width: 100%; padding: 0px; margin-left: auto; margin-right: auto; margin-top: none; margin-bottom: none; height: auto;}
/* Dropdown Content (Hidden by Default) */
.dropdown-content { display: none; background-color: transparent; width: auto; padding: 0px; border: none;}
/* Content inside the dropdown */
.dropdown-content { float: left;}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content { display: block; margin-top: none; margin-bottom: none; width: auto; height: 10%}
.link { display: block; max-width: auto; float: left; clear: left; /*border: 1px solid pink;*/ /*line-height: 5%;*/}<!DOCTYPE html>
<head> <title>L4-E</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="author" content="Izzy Palmer"> <meta name="description" content="L4-E Music"> <meta name="keywords" content="Music, L4-E"> <meta name="robots" content="noindex, nofollow"> <link rel="stylesheet" href="question.css"> <link href="https://fonts.googleapis.com/css?family=Lato|Pontano+Sans" rel="stylesheet"></head>
<figure> <div class="sidebarbox" id="sidebar"> <header> <a href="index.html"> <h1>L4-E</h1> </a> </header> <img src="images/Sidebar-art.PNG" id="sidebarart" alt="Sidebar Art"><br>
<div class="dropdown"> <button class="dropbtn"><h3>Bio</h3></button> <div class="dropdown-content"> <p>this is my bio. this is my bio. this is my bio. this is my bio. this is my bio. this is my bio.this is my bio. this is my bio. this is my bio. this is my bio. this is my bio. this is my bio. this is my bio. this is my bio. this is my bio. this is my bio.</p> </div> </div> <div class="dropdown"> <button class="dropbtn"><h3>Contacts</h3></button> <div class="dropdown-content"> <div class="link"> <a href="#" target="_blank"> <h5>Facebook</h5> </a> </div> <div class="link"> <a href="#" target="_blank"> <h5>Twitter</h5> </a> </div> <div class="link"> <a href="https://soundcloud.com/l4-e" target="_blank"> <h5>Soundcloud</h5> </a> </div> </div> </div> </div></figure>Space above and below inline content
Apply the font-size on parent instead of span it self, sample > div div {font-size:13px;}
How to make a border around a div have less white space above the first p?
You got two ways to do this
First you can tagert the first p child of your div and remove the padding top
#animal-info { max-width: 256px; padding: 8px; font-size: 15px; border: 1px solid lightgrey; border-radius: 5px;}
#animal-info p:first-child { margin-top: 0;}<div id="animal-info"> <p>Cat</p> <p>Dog</p> <p>Fish</p></div>Identify if there is more space below or above an element in the DOM
It's hard to give a complete answer without knowing how your components are set up, but there are a couple of HTML features that might help you, depending on whether you want to choose based on space above/below within the viewport, or above/below within the parent component.
If you want to do it based on space within the viewport, you can use Element.getBoundingClientRect() to find distance between the input and the top/bottom of the viewport:
const element = document.querySelector('input');
const elementRect = element.getBoundingClientRect();
const spaceAbove = elementRect.top;const spaceBelow = window.innerHeight - elementRect.bottom;
if (spaceBelow < spaceAbove) { // logic to render with more space above input} else { // logic to render with more (or equal) space on bottom}<input />Why is there space above an element that appears to have no margin or padding?
Your <nav> element has a padding of 10px.
EDIT: The absolutely positioned search form seems to be causing the problem. I made the following changes and the space went away:
#searchbox_div {
position: relative;
display: block;
padding: 0;
width: 100%;
}
#searchbox {
position: relative;
float: right;
}
#logo {
display: inline-block;
width: 200px;
font-family: arial;
margin: 0px;
padding: 0px;
font-size: 26px;
float: left;
}
#main_nav{
display: inline-block;
padding: 0px;
margin: 0px;
margin-top: 4em;
margin-left: 1em;
}
Related Topics
Make All Images in Mat-Card-Image Same Size But Scale Correctly
Change the Color of Mui Autocomplete Option
CSS Background Image Centered with Stellar Js
Media Queries with Rem Units in Chrome
Matrix 3D Transform for Obtaining Trapezoid
CSS Display Property When a Float Is Applied
Background Url Path in a Jsf Template
Global CSS Variables VS Local Variables in Terms of Efficiency
Firefox Transitions Not Working
Flexbox Vertical Align Child Top, Center Another
Percentage Height in Nested Flex Box
Which Fallback Is Best When Using Rem as Font-Size Unit in a Responsive Environement