This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 5 years ago.
I'm trying to find where the white space below my blocks container is coming from. I can fix it by adding a negative margin-bottom, but I'm wondering where it is coming from in the first place. I want it to be on the very bottom border on the container div.
JSFiddle: https://jsfiddle.net/sv7eqoff/
HTML:
<!DOCTYPE html>
<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>Positioning</title>
<link rel="stylesheet" href="positioning.css">
</head>
<body>
<nav></nav>
<div id="container">
<div id="topbar"></div>
<div id="blocks">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<footer></footer>
</body>
</html>
CSS:
body {
margin: 0px 0px;
}
nav {
height: 100px;
background-color: blue;
width: 100%;
}
#container {
border: 2px solid black;
width: 90%;
margin: 40px auto;
}
#topbar {
width: 100%;
height: 200px;
background-color: lightgray;
}
#blocks div {
width: 200px;
background-color: lightgray;
height: 200px;
display: inline-block;
margin-top: 5px;
}
footer {
height: 100px;
background-color: blue;
width: 100%;
}
It's because those DIVs are inline-block; elements, which are aligned at the baseline (like text), meaning that some whitespace below that baseline is reserved for those parts of the letters which go under the line (like in letters g, j, p etc.).
You can avoid that by using vertical-align: top on inline-block elements.
Related
This question already has answers here:
Center one and right/left align other flexbox element
(11 answers)
Closed 8 months ago.
I want my first element to be on the left and my second element to be in the exact center of the screen (while being horizontally aligned). Logo/text left, navigation bar in the middle.
I cant seem to get the following result with the code below:
|red|-------|green|------------|
I want the center of the Green square in the middle of the screen. Which would normally happen if I used text-align: center; on a single element if its not inline-blocked.
HTML:
<body>
<div class="red-color"></div>
<div class="green-color"></div>
</body>
CSS:
.red-color {
background-color: red;
padding: 100px;
display: inline-block;
}
.green-color {
background-color: green;
padding: 100px;
display: inline-block;
}
Would really appreciate any advice, I have been stuck on this for a few days now already. I've tried to wrap them both up in a div and text-align: center; them. but then I cant seem to push the red square back to the left.
And while I can do it by playing with the margins and eyeballing the center, this does not feel like the optimal solution.
<!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>Document</title>
</head>
<style>
.main{
width: 100%;
height: 100px;
display: flex;
flex-direction: row;
}
.red-color {
background-color: red;
width: 30%;
}
.green-color {
background-color: green;
width: 30%;
}
</style>
<body>
<div class="main">
<div class="red-color">logo/text</div>
<div class="green-color">navbar</div>
</div>
</body>
</html>
u can use flexbox to adjust elements accordingly. I created a main-div then gave height and width and then its has green and red div's , I applied flex property to main and gave width to each div so , by adjusting the width u can change the position of logo or navbar.
<!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">`enter code here`
<title>Document</title>
</head>
<style>
.main{
width: 100%;
height: 100px;
display: flex;
flex-direction: row;
}
.red-color {
background-color: red;
width: 30%;
margin-right: 5%;
}
.green-color {
background-color: green;
width: 30%;
margin-left: 10%;
}
</style>
<body>
<div class="main">
<div class="red-color">logo/text</div>
<div class="green-color">navbar</div>
</div>
</body>
</html>
On other tags, using BFC can clear the float, why the body is not available.
As expected, add overflow: hidden on the body to form a BFC, which can achieve the effect of clearing the float, but this is not the case?
div.f {
float: left;
width: 100px;
height: 100px;
background: red;
margin-right: 1px;
}
body {
overflow: hidden;
border: 1px dashed skyblue;
}
.p {
overflow: hidden;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- <div class="p">
<div class="f"></div>
<div class="f"></div>
</div> -->
<div class="f"></div>
<div class="f"></div>
</body>
</html>
because overflow has a special behavior when applied to body element and it get propagated to html element instead. You need to add overflow:auto to html to avoid this:
div.f {
float: left;
width: 100px;
height: 100px;
background: red;
margin-right: 1px;
}
body {
overflow: hidden;
border: 1px dashed skyblue;
}
html {
overflow: auto;
}
<div class="f"></div>
<div class="f"></div>
UAs must apply the overflow-* values set on the root element to the viewport. However, when the root element is an [HTML] html element (including XML syntax for HTML) whose overflow value is visible (in both axes), and that element has a body element as a child, user agents must instead apply the overflow-* values of the first such child element to the viewport. The element from which the value is propagated must then have a used overflow value of visible. ref
So you body element will have again overflow:visible after the propagation
To have it working on the body, you can use display:flow-root, I believe this is have to do with how the width of the content affects the body display/render, and by adding display:flow-root it will clear floated tag inside it.
div.f {
float: left;
width: 100px;
height: 100px;
background: red;
margin-right: 1px;
}
body {
display: flow-root;
border: 1px dashed skyblue;
}
.p {
overflow: hidden;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--<div class="p">
<div class="f">AAAA</div>
<div class="">test</div>-->
</div>
<div class="f"></div>
<div class="f"></div>
</body>
</html>
This question already has answers here:
Why top margin of html element is ignored after floated element?
(10 answers)
Closed 2 years ago.
So I applied clear:left to a div and tried changing its top margin but it did not affect anything. Here is the code:
<!DOCTYPE html>
<html>
<head>
<title>Float</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.div1 {
border: 2px solid black;
float: left;
}
.div2 {
clear: left;
border: 2px solid red;
width: 120px;
height: 120px;
margin-top: 320px; /* Why is margin not working?*/
}
</style>
</head>
<body>
<div class="div1">This is suppose to be a first div</div>
<div class="div2">Div2</div>
</body>
</html>
Here is the result :
Now the problem is that the result is same even if I add or remove the top margin. It would be great if you can show me the right answer and also explain why this is happening.
Use of one container like this :
<div class="con" style="overflow: hidden">
<div class="div1">This is suppose to be a first div</div>
</div>
.div1 {
border: 2px solid black;
float: left;
}
.div2 {
border: 2px solid red;
width: 120px;
height: 120px;
margin-top: 100px;
}
<div class="con" style="overflow: hidden">
<div class="div1">This is suppose to be a first div</div>
</div>
<div class="div2">Div2</div>
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-only masonry layout
(4 answers)
CSS Floating Divs At Variable Heights [duplicate]
(10 answers)
Closed 3 years ago.
I am making a html page and have 3 sort of boxes, i have a 20% width(named single-box) and 40% width called double-box (both have hight 33%).
The other bbox is 100% height( named foto-box), 40% width.
Now i want to float next to eachother: double-box, singel-box, foto-box.
Then i want all single boxes, but the single bbox is getting under the 100% of the foto-box. How can i
html, body{
height: 100%;
background-color: #c5c5c5;
}
.screen{
width: 98%;
height: 98%;
margin: 1% 1% 1% 1%;
}
.dubble-box{
width: 40%;
height: 33%;
background-color: aqua;
float: left;
}
.single-box{
height: 33%;
width: 20%;
background-color: black;
float: left;
}
.picture-box{
width:40%;
height: 100%;
background-color: bisque;
float: left;
}
<!DOCTYPE html>
<html>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="reset.css"><!--resets css to default-->
<link rel="stylesheet" href="main.css"><!--gives css to page-->
<link rel="shortcut icon" href="lb.png" type="image/png">
<body>
<div class="screen">
<div class="dubble-box">
<p> levi</p>
</div>
<div class="single-box"></div>
<div class="picture-box"></div>
<div class="single-box"></div>
</div>
</body>
Picture