This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 7 years ago.
i created a super simple html and css file to test display: inline-block, but when i test it there is some unwanted spaces between the boxes...
Html:
<!doctype html>
<head>
<title></title>
<meta charset="utf-8" />
<link href="Mall.css" rel="stylesheet" />
</head>
<body>
<div style="background-color:red;"></div>
<div style="background-color:blue;"></div>
<div style="background-color:green;"></div>
<div style="background-color:yellow;"></div>
</body>
</html>
CSS:
body {
padding: 0px;
margin: 0px;
width: 100%;
}
div {
display: inline-block;
margin: 0px;
padding: 0px;
width: 50px;
height: 50px;
}
I removed all paddings and margins from the div tags and the body tag, however when i run the html in chrome it produces this result:
It is 3 pixels between the divs and 5 pixel beneth them so the total height of the body is 55 pixels when it should only be 50.
I have found a weird way to fix this which makes me think that this is an issue with the webbrowser and not the code, if i change the CSS to display: block it will show my divs as normal in a diagonal line and whitout any weird spaces inbetween them.
Now if i open the developer tools in chrome and change the display in the style of one of the divs to inline-block they all line up horizantally and whitout any unwanted spaces.
Anyone have any idea why it behaves like this?
You have to remove white spaces between div closing and opening.
HTML:
<div style="background-color:red;"></div><div style="background-color:blue;"></div><div style="background-color:green;"></div><div style="background-color:yellow;"></div>
CSS:
body {
padding: 0px;
margin: 0px;
width: 100%;
}
div {
display: inline-block;
margin: 0px;
padding: 0px;
width: 50px;
height: 50px;
}
fiddle
Chris coyier has a number of solutions for dealing with this white space here: http://css-tricks.com/fighting-the-space-between-inline-block-elements/
short answer :
change your HTML code from
<body>
<div style="background-color:red;"></div>
<div style="background-color:blue;"></div>
<div style="background-color:green;"></div>
<div style="background-color:yellow;"></div>
</body>
to
<body>
<div style="background-color:red;"></div><div style="background-color:blue;">
</div><div style="background-color:green;">
</div><div style="background-color:yellow;"></div>
</body>
this is how inline elements behave.
i.e. you should not have whitespaces between them in the code to prevent them from showing whitespace/margin when rendered.
Related
This question already has answers here:
How to disable margin-collapsing?
(12 answers)
Closed 1 year ago.
Please see the HTML below:
#container
{
height: 60%;
width: 100%;
background-color:green;
}
#floatElement
{
top:0px;
height: 60%;
width: 50%;
background-color:red;
float:right;
}
<html>
<head>
<link rel="stylesheet" href="css.css">
</head>
<body>
<div id="floatElement">
<h1 >this is a test inside the float element</h1>
</div>
<div id="container">
<h1>test</h1>
</div>
</body>
</html>
Here is the result.
Why is there extra space above the first line of text inside the float i.e. why is the word "text" and the words: "this is a test inside a float element" not in line?
I have looked here: https://developer.mozilla.org/en-US/docs/Web/CSS/float. The first image indicates that they should be in line. I have also Googled it and this is the closest I got: How to remove space at top of page when using float?. However, it does not answer my question.
This is because the browser default user agent stylesheet adds style for some elements, in that case I'd recommend using a reset css.
Now back to the question, the space appears because you're using float so it will contain the default margin of the h1. According to https://developer.mozilla.org/
The float CSS property places an element on the left or right side of
its container, allowing text and inline elements to wrap around it.
The element is removed from the normal flow of the page, though still
remaining a part of the flow.
Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/float
Whereas background color of div elements doesn't respect to the margin of its child, you have to use padding for that. Because margin applies outside of the border of the element and padding happens inside the borders.
Here's an example:
#container { height: 60%; width: 100%; background-color:green; }
#container h1 {margin: 100px 0;}
<html>
<head>
<link rel="stylesheet" href="css.css">
</head>
<body>
<div id="container">
<h1>test</h1>
</div>
</body>
</html>
As you can see the margin is omitted by the background color of the parent, but still takes place.
Here's another scenario.
#container { height: 60%; width: 100%; background-color:green; }
#container h1 {margin: 0; padding: 100px 0;}
<html>
<head>
<link rel="stylesheet" href="css.css">
</head>
<body>
<div id="container">
<h1>test</h1>
</div>
</body>
</html>
You can see what happens when padding is added to the h1
Here's the answer for your question, to make them both fly on the same line remove the margin for the h1
#container
{
height: 60%;
width: 100%;
background-color:green;
}
#floatElement
{
top:0px;
height: 60%;
width: 50%;
background-color:red;
float:right;
}
#floatElement h1, #container h1{
margin-block-start: 0;
/*you can also use margin: 0 in short */
}
<html>
<head>
<link rel="stylesheet" href="css.css">
</head>
<body>
<div id="floatElement">
<h1 >this is a test inside the float element</h1>
</div>
<div id="container">
<h1>test</h1>
</div>
</body>
</html>
This question already has answers here:
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
What is the default padding and/or margin for a p element (reset css)?
(5 answers)
Closed 2 years ago.
I am trying to make a box like the following in HTML and CSS:
I have the following code:
orders.html:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Orders Page</title>
<link rel="stylesheet" type="text/css" href="orders.css">
</head>
<body>
<div class="order-container">
<div class="order-header">
<p>ORDER #10980<p>
</div>
<div class="order-list">
</div>
<div class="order-footer">
</div>
</div>
</body>
</html>
orders.css:
.order-container {
border-style: solid;
height: 400px;
width: 400px;
}
.order-header {
text-align: center;
background-color: #a9dbde;
height: 60px;
}
I want the blue header to align with the top of the box. However, there is a white space between the blue header and the top of my box, as seen in the following image. I am not sure how to make the top of the header align with the top of the box. Any insights are appreciated.
Browsers have default styles that you have to override and the browser you are using is adding a margin to p element.
I recommend you use one of the header tags for your element (more semantic).
<h1 class="order-header">ORDER #10980<h1>
And remove margins
.order-header {
margin: 0;
...
}
You can use font-size to adjust text size and line-height to center the text vertically (you can remove height if you do this).
HTML has some default value like #khan said. Also you can try flex property in css, it will help u a lot when doing some element align operation.
<!DOCTYPE html>
<html>
<head>
<title>Making a box with a coloured header in HTML and CSS</title>
<style type="text/css">
.order-container{
border: 1px solid #999;
height: 200px;
width: 300px;
}
.order-header{
text-align: center;
height: 50px;
background: #81CCD3;
}
.order-header p{
margin:0 ;
}
</style>
</head>
<body>
<div class="order-container">
<div class="order-header">
<p>ORDER #10980</p>
</div>
<div class="order-list">
</div>
<div class="order-footer">
</div>
</div>
</body>
</html>
Remove the default margin from the p tag. Here's a list of default values.
p {
margin: 0;
}
p {
margin: 0;
}
.order-container {
border-style: solid;
height: 400px;
width: 400px;
}
.order-header {
text-align: center;
background-color: #a9dbde;
height: 60px;
}
<div class="order-container">
<div class="order-header">
<p>ORDER #10980
<p>
</div>
<div class="order-list">
</div>
<div class="order-footer">
</div>
</div>
This question already has answers here:
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
Margin-Top push outer div down
(8 answers)
Closed 4 years ago.
.banner{
background-color: #7fffd4;
color: white;
font-family: Apple Chancery, cursive;
margin: 0;
padding: .1%;
width: 100%;
font-size: 14px;
}
body{
margin: 0;
}
.container {
position: relative;
}
.rect{
width:100%;
height:599px;
position: absolute;
margin: 0;
background:#aa7fff;
}
.left{
width: 25%;
padding-left: 2%;
font-family: Apple Chancery, cursive;
color: white;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>EmeryForAmerica</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="banner">
<h1>
<center>""</center>
</h1>
</div>
<div class="rect">
<div class="left">
<h1> "America has problems, and in order to solve those problems, we need to make America not have problems anymore..."</h1>
<br>
<h2> -Emery</h2>
</div>
</div>
</div>
<div class="container">
<center><img src="EliBinky.jpg" height="full" width="full"></center>
</div>
</div>
</body>
</html>
I know it looks awful, and the image is missing, however, answers such as "Removing white bar from top of page" suggest making the margin and padding 0. If I do this on the banner, it adds the white bars back. Currently, the bars are gone because there is padding (even .1%) which removes the bars. This solution is not viable because I need 0 padding for the integrity of the rest of the page. Please help.
Today I came across this code. It works as I would expect in Chrome, but it is adding a margin on a wrong element with Firefox:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Site Title</title>
<style type="text/css" media="screen">
body {
background-color: #aaa;
margin: 0;
}
#header {
background-color: #fff;
}
#logo {
float: left;
}
#menu {
float: right;
}
.container {
width: 960px;
margin: 0 auto;
}
.main {
margin-top: 36px;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<div id="header">
<div class="container">
<div id="logo">Logo</div>
<div id="menu">Home</div>
<div class="clear"></div>
</div>
</div>
<div class="container main">
Content
</div>
</body>
</html>
Firefox seems to add the margin in the .main rule to the content div, which was expected, and to the header div too.
If I add some text inside the header it would work as expected and the header won't have that margin:
<div id="header"> Some text here
<div class="container">
<div id="logo">Logo</div>
<div id="menu">Home</div>
<div class="clear"></div>
</div>
</div>
</div>
I can also add some text after the header block and it would also do the trick for Firefox.
I can't figure out why is Firefox adding that margin to the header element.
Very strange problem, I don't see why this happens.
It however seems to help when you add a padding of at least 1px to .container.
Also check this demo.
The problem has something to do with the container with automatic height and floating children...
Adding display:inline-block; to the #header will make it works in every browser (well except old IE), will include in the white box the right-floated div too (that now is not), and will continue to adjust the height automatically.
Fiddle: http://jsfiddle.net/AndreaLigios/VfAq7/1/
I have created a simple layout using the HTML div tag. I would like for there to be NO margin (meaning no whitespace) at the top of my page. I am able to achieve this in Safari, but for some reason the same HTML code isn't cutting it in Firefox. Here is a jsfiddle of my HTML code: http://jsfiddle.net/WhaGH/
You can't see it in jsfiddle, but if you copy and paste the code into an HTML document and then open it up using Firefox, there is a margin about 21px in height at the top of the page. This top margin does not appear if you open the same HTML file in Safari. I read somewhere else that different browsers use different amounts of default margin and padding with the "html" and "body" tags, hence my inclusion of some CSS in the "head" that sets margin and padding for those tags to 0. Again, this works for Safari but not Firefox (or rather, it works for the left margin but not for the top margin in Firefox). Does anyone know why?
by default Firefox use margin-top: 21.4333px for tag, and to div#header is added to the indentation.
Use padding-top to childs of block to prevent this.
h1 { margin-top: 0px; }
Fix this problem.
You've done the reset of the default values only for body and html, do it for the other elements as well. You might consider to use, in the future, a CSS reset, have a look at HTML5 Boilerplate
http://html5boilerplate.com/html5boilerplate-site/built/en_US/docs/css/
you did't clear your header (add one properties overflow:hidden;)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<style type="text/css">
html,body {
margin:0;
padding:0;
}
</style>
</head>
<body style="width: 800px;">
<div id="header" style="width:800px; height:100px; background-color: blue; border-bottom: solid black 1px;overflow:hidden;">
<h1>This is the Header.</h1>
</div>
<div id="leftcolumn" style="width:199px; height: 500px; background-color: red; float:left; border-right: solid black 1px;">
<p>This is the left column.</p>
</div>
<div id="content" style="width:400px; height: 500px; background-color:gray; float:left;">
<p>This is where the content goes.</p>
</div>
<div id="rightcolumn" style="width:199px; height: 500px; background-color: green; float: left; border-left: solid black 1px;">
<p>This is the right column.</p>
</div>
</body>
</html>
<style type="text/css">
body { margin: 0; padding: 0; }
h1 { margin: 0; }
</style>