This question already has answers here:
How wide is the default `<body>` margin?
(4 answers)
CSS position absolute and full width problem
(7 answers)
Closed 3 years ago.
Please see the code below. The footer is not touching the edges. if I poot footer width to 100% or 100vw i see a horizontal scrollbar in the browser. 99% falls short. Instead of finding a hardcoded value like 99.4% etc. is their way to touch the edges perfectly?
.main .footer {
border: 1px solid black;
background-color: #d4d4d4;
text-align: center;
position: absolute;
bottom: 0;
height: 40px;
width: 99%;
}
<div class="main">
<div class="footer"></div>
</div>
Every browser has its own default ‘user agent’ stylesheet, that it uses to make unstyled websites appear more legible. For example, most browsers by default make links blue and visited links purple, give tables a certain amount of border and padding, apply variable font-sizes to H1, H2, H3, etc. and a certain amount of padding to almost everything.
In your current example, the default body will have a margin set. To make the body of the document touch the edges, you will need to add a reset to the body margin, margin: 0;
Read more about it here. https://cssreset.com/what-is-a-css-reset/
You need to remove the margin on the body element. Then since you're using absolute positioning, remove the width declaration and use left/right:
body {
margin:0;
}
.main .footer {
border: 1px solid black;
background-color: #d4d4d4;
text-align: center;
position: absolute;
bottom: 0;
right: 0;
left: 0;
height: 40px;
}
body {
margin: 0;
}
<div class="main">
<div class="footer"></div>
</div>
Apply a CSS reset, by default, it have padding and margin setted, that why it not fit the edge:
*{
margin:0;
padding:0;
}
.main {
border: 1px solid black;
background-color: #d4d4d4;
height: 90vh;
}
.footer {
border: 1px solid black;
background-color: #d4d4d4;
height: 10vh;
}
<body>
<div class="main">
Your content
</div>
<div class="footer">
Your Footer
</div>
</body>
You should add the left attribute too, and you put a border, that border occupies a space, i used box-sizing: border-box; option to use the inside space of the element.
I attached some useful links for you:
box-sizing,
box-model
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
.main .footer {
border: 1px solid black;
box-sizing:border-box;
background-color: #d4d4d4;
text-align: center;
position: absolute;
bottom: 0;
left:0;
height: 40px;
width: 100%;
}
</style>
</head>
<body>
<div class="main">
<div class="footer"></div>
</div>
</body>
</html>
Firstly I would recommend to use the new tags <header>, <main>& <footer> instead div with class.
Secondly the problem is that the body have a initial margin so try:
body{ margin:0; }
After that you will still have a scrollbar because of the border.
So you have two options:
Set border-top instead of left and right.
Give all elements the style * {box-sizing: border-box;} which means padding and border is included of the elements total width and height.
Related
This is my first question on stackoverflow, so please bear with me if I don't do everything correct. If I can format this better, please let me know.
I am working through the TOP 2nd CSS Margin/Padding exercises. I was able to get through the first one no problem, but I have a situation that I don't understand in the second task.
The goal was to manipulate the padding/margins to achieve a certain desired outcome. Below is the original HTML and the CSS original, followed by the solution. I've put a link to the .png of desired outcome at the bottom.
My question is specifically about the .card and .title elements.
Before the 8px padding was added to the .card element, the edge of the blue background inside the .title element when right up to the top edge of the box and were flush with the .card element. When I add 8px padding to the .card element, it seems to add it correctly to the left, right and bottom of everything, however the top of the .title element seems almost double in white space between the top of the blue box in the .title element and the top of the .card element.
This is fixed then by adding the margin-top: 0; in the .title element.
I'm having a very hard time conceptualizing why I need to add the margin-top of 0. I think I understand everything else. But why is everything flush without the padding, but when I add the 8px padding, it looks good on all sides except the top which appears double, necessitating the margin-top: 0; being inserted into the .title element
Does it have anything to do with an h1 margin having some extra margin to begin with? Again, this is my first run at CSS so I'm not sure if that is correct. If it does have something to do with the h1 margin, why am I only seeing it when I add the padding?
Perhaps I'm missing a super easy concept here, but it's doing my head in so any help would be appreciated.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Margin and Padding exercise 2</title>
<link rel="stylesheet" href="solution.css">
</head>
<body>
<div class="card">
<h1 class="title">I'm a card</h1>
<div class="content">I have content inside me..lorem ipsum blah blah blah. Here's some stuff you need to read.</div>
<div class="button-container">and a <button>BIG BUTTON</button></div>
</div>
</body>
</html>
CSS Original + Solution
body {
background: #eee;
font-family: sans-serif;
}
.card {
width: 400px;
background: #fff;
margin: 16px auto;
}
.title {
background: #e3f4ff;
}
.content {
background: #e3f4ff;
}
.button-container {
background: #e3f4ff;
}
button {
background: white;
border: 1px solid #eee;
}
/* SOLUTION */
/* disclaimer: duplicating the selectors here isn't best practice.
In your solution you probably put it right inside the existing selectors,
which _is_ the best practice.
We separated it out here to make it extra clear what has changed. */
.card {
padding: 8px;
}
.title {
margin-top: 0;
margin-bottom: 8px;
font-size: 16px;
padding: 8px;
}
.content {
margin-bottom: 8px;
padding: 16px 8px;
}
.button-container {
text-align: center;
padding: 8px;
}
button {
display: block;
margin: 0 auto;
padding: 8px 24px;
}
body {
background: #eee;
font-family: sans-serif;
}
.card {
width: 400px;
background: #fff;
margin: 16px auto;
}
.title {
background: #e3f4ff;
}
.content {
background: #e3f4ff;
}
.button-container {
background: #e3f4ff;
}
button {
background: white;
border: 1px solid #eee;
}
/* SOLUTION */
/* disclaimer: duplicating the selectors here isn't best practice.
In your solution you probably put it right inside the existing selectors,
which _is_ the best practice.
We separated it out here to make it extra clear what has changed. */
.card {
padding: 8px;
}
.title {
margin-top: 0;
margin-bottom: 8px;
font-size: 16px;
padding: 8px;
}
.content {
margin-bottom: 8px;
padding: 16px 8px;
}
.button-container {
text-align: center;
padding: 8px;
}
button {
display: block;
margin: 0 auto;
padding: 8px 24px;
}
<div class="card">
<h1 class="title">I'm a card</h1>
<div class="content">I have content inside me..lorem ipsum blah blah blah. Here's some stuff you need to read.</div>
<div class="button-container">and a <button>BIG BUTTON</button></div>
</div>
The reason for the phenomenon you're observing is a CSS "feature" called collapsing margins, which has been giving developers headaches for literally decades.
Let me show you a very simplified example of how it works.
.outer {
background-color: green;
height: 250px;
}
.inner {
background-color: orange;
height: 100px;
}
<div class="outer">
<div class="inner"></div>
</div>
So this does what we're expecting it to do: It shows the orange div.inner right inside the green div.outer, at the very top of div.outer.
So what if we want to move the div.inner like let's say 20px down inside div.outer?
Let's try what seems intuitive: .inner { margin-top: 20px; }
.outer {
background-color: green;
height: 250px;
}
.inner {
background-color: orange;
height: 100px;
/* let's move it down 20px */
margin-top: 20px;
}
<div class="outer">
<div class="inner"></div>
</div>
Now instead of moving down div.inner inside div.outer, the whole div.outer has moved, with the div.inner still at the very same position relative to div.outer.
Huh???
This is where collapsing margins kick in. In certain conditions, if a parent with a margin-top (0 by default for div) has a child that has a margin-top (like in your code the h1 has), both margins collapse, meaning whichever element has the greater margin is applied to the parent element, not the child.
This only applies as long as the parent element has no padding-top set. Simply setting that to 1px stops margins from collapsing:
.outer {
background-color: green;
height: 250px;
/* stops collapsing margins: */
padding-top: 1px;
}
.inner {
background-color: orange;
height: 100px;
/* let's move it down 20px */
margin-top: 20px;
}
<div class="outer">
<div class="inner"></div>
</div>
What is going on is described at MDN for three different basic cases, this one applying here:
No content separating parent and descendants
If there is no border, padding, inline part, block formatting context created, or clearance to separate the margin-top of a block from the margin-top of one or more of its descendant blocks; or no border, padding, inline content, height, or min-height to separate the margin-bottom of a block from the margin-bottom of one or more of its descendant blocks, then those margins collapse. The collapsed margin ends up outside the parent.
You are correct, h1 has an inherent margin associated with it. I believe in chrome it is 0.67em. You can demonstrate this property by simply changing the h1 in <h1 class="title">I'm a card</h1> to a div and you can see how there's no margin anymore when you apply this.
Below in this example all I did was remove the margin-top: 0; from .title and switched h1 to divand you can see there no margin anymore
body {
background: #eee;
font-family: sans-serif;
}
.card {
width: 400px;
background: #fff;
margin: 16px auto;
}
.title {
background: #e3f4ff;
}
.content {
background: #e3f4ff;
}
.button-container {
background: #e3f4ff;
}
button {
background: white;
border: 1px solid #eee;
}
/* SOLUTION */
/* disclaimer: duplicating the selectors here isn't best practice.
In your solution you probably put it right inside the existing selectors,
which _is_ the best practice.
We separated it out here to make it extra clear what has changed. */
.card {
padding: 8px;
}
.title {
margin-bottom: 8px;
font-size: 16px;
padding: 8px;
}
.content {
margin-bottom: 8px;
padding: 16px 8px;
}
.button-container {
text-align: center;
padding: 8px;
}
button {
display: block;
margin: 0 auto;
padding: 8px 24px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Margin and Padding exercise 2</title>
<link rel="stylesheet" href="solution.css">
</head>
<body>
<div class="card">
<div class="title">I'm a card</div>
<div class="content">I have content inside me..lorem ipsum blah blah blah. Here's some stuff you need to read.</div>
<div class="button-container">and a <button>BIG BUTTON</button></div>
</div>
</body>
</html>
You're absolutely right about the margin on the h1 tag. Browsers add default styling to most HTML elements. It varies slightly between browsers, but in Chrome by default an h1 tag has about 0.67em of margin above and beneath it.
These default stylings are included to aid legibility of HTML documents that don't have any CSS applied – but they can all be overridden.
A really handy feature to take advantage of when you're writing CSS is your browser's 'Inspect element' feature: If you right click on your h1 tag in your browser and click 'Inspect element` in the menu that appears, you can see both the styling you've applied and the browser's default styling, referred to as the 'user agent stylesheet.'
If you hover over an element you can see how its padding and margin are affecting its layout.
You can see Chrome by default adds a margin-block-start and margin-block-end to the h1 tag by default. It's worth asking why it doesn't just use margin-top and margin-bottom, but the margin-block property covers off text that isn't oriented from left to right, or is rotated. Either way, setting your own margin-top and margin-bottom will override it, as you've done.
#connexo has described the collapsing margins phenomenon, which of course adds even more to ponder. This Medium article provides a little more context on why it occurs, using paragraphs as an example.
I have a project and I am having trouble fitting everything inside the body. Child elements always go outside of the body, when I looked at my code it looks like okay, so I made an experiment; I trace each HTML element by giving them a border, so that I can see them visually how they will behave. This is what I have so far.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="index.css">
<title>A nice example</title>
</head>
<body>
<div class="box">
<div class="childbox"></div>
</div>
</body>
</html>
CSS Example 1, setting 100% height for everything
html{height: 100%; border: 5px solid black; padding: 5px;} /*black*/
body{height: 100%; border: 5px solid red; padding: 10px;} /*red*/
.box{height: 100%; border: 5px solid green; padding: 5px;} /*green*/
.childbox{height: 100%; border: 5px solid pink} /*pink*/
Output : everything overflows outside html.
CSS Example 2, setting 100% height for the body and its child's, except html
html{border: 5px solid black; padding: 5px;} /*black*/
body{height: 100%; border: 5px solid red; padding: 10px;} /*red*/
.box{height: 100%; border: 5px solid green; padding: 5px;} /*green*/
.childbox{height: 100%; border: 5px solid pink} /*pink*/
Output : Everything fits inside html, but doesn't occupy the full height of the screen. I know I can do this by making the body min-height: 100vh.. but it will stop expanding when the 100vh is full..
My goal is,
to make the body and html 100% in height / not using vh.
and not overflow outside the body, or html
when adding child elements I want everything from html to body expands in height dynamically and not go outside and overflow, or overlaps each other..
the body should be inside html, and the div's should be inside the body.
Please help.
This is what is happening, the CSS is calculating 100% width and height and then it adds a 10px / 5px padding after which causes the elements to overflow by 10 / 5px.
You can change this by adding the following css at the beginning of your code:
* {
box-sizing: border-box;
//Edit:
margin: 0;
padding: 0;
}
This will make sure that the padding is accounted for in the 100% width and height.
Hope this works!
Edit:
Also, what you are looking for in the html and body style is height: auto; not 100%.
If its happening it means that you are not following CSS box model during styling your sheet. you can also use box-sizing property of CSS.
Consider an example
<div id="frame">This is the frame
</div>
Then use box-sizing property and set its value to border-box.
<style>
#frame{ width: xx% height:yy%; box-sizing:border-box; }
</style>
I'm a beginner who wants to visualize the html and css changes that I make while learning and so I would like to put a border around all the elements that I add.
Problem: The blue border around the html/body element cuts off and isn't fully displayed on the bottom and right sides of the border when overflow is set to hidden.
Why is it that the border is overflowing the html page even when its width and height are set to 100%?
HTML
<!DOCTYPE html>
<html>
<head>
<title> Practice Webpage </title>
<link href="stylesrevised.css" rel="stylesheet" type="text/css" >
</head>
<body></body>
</html>
CSS
html,body{
width: 100%;
height: 100%;
margin: 0; /* Space from this element (entire page) and others*/
padding: 0; /*space from content and border*/
border: solid blue;
border-width: thin;
overflow:hidden;
display:block;
}
Here is the resulting webpage
Welcome to the coding journey!!! In your css, add the following: box-sizing: border-box;
This will make your elements fit within the prescribed width and height.
html,body{
width: 100%;
height: 100%;
margin: 0; /* Space from this element (entire page) and others*/
padding: 0; /*space from content and border*/
border: solid blue;
border-width: thin;
overflow:hidden;
display:block;
box-sizing: border-box;
}
<!DOCTYPE html>
<html>
<head>
<title> Practice Webpage </title>
<link href="stylesrevised.css" rel="stylesheet" type="text/css" >
</head>
<body></body>
</html>
your overflow: hidden; is whats messing things up for you, the default setting for borders is content-box which adds pixels to the width and height of your elements, eg if you have a div 100px wide and add a 1px border to it is actual size will be 102px.
you can solve this by using box-sizing: border-box; which causes the border to be added to the inside of the element instead.
html,body{
width: 100%;
height: 100%;
margin: 0; /* Space from this element (entire page) and others*/
padding: 0; /*space from content and border*/
border: solid blue;
border-width: thin;
display:block;
box-sizing: border-box;
}
If you want to make this effect all borders used through out your site you can use this, saves having to set it each time you add a border.
*, *:before, *:after {
box-sizing: border-box;
}
I am learning html and i cant understand why when i have two lines inside one div the second line doesn't fall within the borders of the div.
<html>
<head>
<title></title>
<link type="text/css" rel="stylesheet" href="testingsite.css">
</head>
<body>
<div><header><h3>Line 1</h3>
<br><h5>Line 2</h5></header></div>
</body>
My css isn't showing in a code block properly so i put a jsfiddle link below.
Thanks for any help.
https://jsfiddle.net/xLjsmrfc/
you can try this one:
add height :auto;
body {
background-color: white;
border: 5px solid blue;
}
header {
text-align: center;
height: auto;
box-sizing: border-box;
border: 5px solid blue;
width: 100%;
}
DEMO HERE
You have a height property set in the CSS for the header tag.
height: 75px;
This restricts the height of the <header>, and thus the border. Remove the height property and things will correct.
Dear you are writing the code right but there is a small flaw in Css.
Both lines are falling within the Div just height of Div is Creating dilemma for you.
I've two methods for you :
----------1. Altering Your own code----------
body {
background-color: white;
border: 5px solid blue;
}
header {
text-align: center;
height: 155px;
box-sizing: border-box;
border: 5px solid blue;
width: 100%;
}
----------2. Second My Way :----------
<style>
body {
background-color: white;
border: 5px solid blue;
}
#myid{
text-align: center;
height: 155px;
box-sizing: border-box;
border: 5px solid blue;
width: 100%;
}
</style>
</head>
<body>
<div id="myid">
<header>
<h3>Line 1</h3><br>
<h5>Line 2</h5>
</header>
</div>
</body>
The problem is really with the styling you've done.
Change the div height to something like greater than the current 75px
header {
text-align: center;
height: 105px;
box-sizing: border-box;
border: 5px solid blue;
width: 100%;
}
Whenever you are using heading tag then those tags are taking their own padding and margin by which they are out of your border as you have given height to container so use heading tag according to your need.
Header tags ( h1...h5 ) have some default margins.
You can add the margin:0px for that and it will work fine.
I am trying to understand how to get a full width header. The problem is it has a thin white border around the header and is not full width. I am not using any grid system if that matters.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/style.css" type="text/css" display="screen" >
<title>
test app
</title>
</head>
<body>
<div id="header"/>
</div>
</body>
</html>
CSS
#header {
float:left;
padding:15px 0;
min-width:100%;
background: #5FBEED;
}
Any help much appreciated thanks.
I suppose the problem to be getting the white border around it. A div automatically fills the entire window's width, so remove that min-width style: Example fiddle.
CSS:
#header {
padding: 15px 0;
border: 10px solid white;
background: #5FBEED;
}
Add this to your css
body{ margin: 0; padding: 0; }
Browsers add their own css to html elements and this varies from browser to browser. The margin and padding is also applied to UL and few other elements...
You can read more about this here... http://clagnut.com/blog/1287/
The white border is mostly likely added by the BODY tag's inherent margin. Try adding the following CSS:
body {
margin: 0;
}
html, body{
padding: 0;
margin 0;
}
#header {
padding: 15px 0;
border: 10px solid #5FBEED;
background: #5FBEED;
}
in this case your borders will be the same color as your header background color