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>
Related
Sorry for bad english. How do you align this image to center and adding space on top after the header and for the footer.
Image Link (bc new user)
If I tried this code
margin-left: auto;
margin-right: auto;
width: 50%;
it goes to the center but the background also moves.
What I want is to move the image in the center, having spaces in both header and footer. And background color stays. Below is the code I use.
HTML
<template>
<div class="list">
<headerpc></headerpc>
<dropdown />
<div class="main">
<img src="../home-img/list.png" alt="" />
</div>
<div class="count">
<footerpc></footerpc>
</div>
</div>
</template>
CSS
<style scoped lang="scss">
$font-color: #fff;
.list {
.main {
position: relative;
display: block;
z-index: 1;
background: #131a28;
}
.count {
background: #131a28;
}
}
</style>
you can try giving a specific height to the image and set margin as auto.
img{
width: 300px;
height: 200px;
margin: auto;
}
this will center the image along both axes in its container div.
To center an image, set left and right margin to auto and make it into a block element. here, I have provide the sample code for aligning an image in the center for your reference.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
img {
display: block;
margin-left: auto;
margin-right: auto;
margin-top:10%
margin-bottom:10%
}
</style>
</head>
<body>
<h2>Center</h2>
<img src="img_flower.jpg" style="width:50%;">
</body>
</html>
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:
Align inline-block DIVs to top of container element
(5 answers)
Closed 1 year ago.
This should be simple but I just can't figure it out. I have 3 divs displayed as inline block. Whenever I put an svg image (or any image, for that matter - I linked a jpeg and got the same result but I need to have inline svg in this case) inside of one the divs, it causes the other two divs to move down. What could be causing this? Why are the divs no longer on the same baseline?
Resulting behavior
Here is my (simple) code, less the very lengthy svg bit:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Merch</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="headingcontainer">
<div class="div1">1</div>
<div class="div2">
<svg
</svg>
</div>
<div class="div3">3</div>
</div>
</body>
</html>
CSS:
.div1, .div2, .div3 {
width: 150px;
height: 150px;
display: inline-block;
}
.div1 {
background-color: red;
}
.div2 {
background-color: blue;
}
.div3 {
background-color: green;
}
Someone please make me feel like an idiot by pointing out what's going on here. :-)
I think if you add vetical-align: top; to the elements it will work. inline-block elements are vertical-align: baseline; unless otherwise specified.
Example:
.div1,
.div2,
.div3 {
width: 150px;
height: 150px;
display: inline-block;
vertical-align: top;
}
.div1 {
background-color: red;
}
.div2 {
background-color: blue;
}
.div3 {
background-color: green;
}
<div class="headingcontainer">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
</div>
Just a bit about the default baseline:
Aligns the baseline of the element with the baseline of its parent.
The baseline of some replaced elements, like , is not
specified by the HTML specification, meaning that their behavior with
this keyword may vary between browsers.
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.
I am planning to add colour to the center of the html page. I have tried this:
My html file
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div id="v">
</div>
</body>
</html>
My styles.css
#v {
background: red;
position: center;
}
You can set a height and a width to the div and add a margin like this:
#v {
height: 100px;
width: 100px;
background-color: red;
margin: auto;
}
I would assume that you mean to center an element on the page and then add a background color to that element. Your CSS is not valid although you did come close. if you want to add a background then you need to use background-color instead. If you want to center that element then you can adjust the margin of said element here. is an example that may help.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>center a div and add background color</title>
<style type="text/css">
.wrapper{
width: 100%;
height: 400px;
background-color: blue;
margin: 0 auoto;
}
.centered-element{
width: 50%;
height: 200px;
margin: 0 auto;
background-color: red;
}
p{
text-align: center;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="centered-element">
<p>this div is centered!</p>
</div>
</div>
</body>
</html>
what i have done is gave the div that i wanted to center align a margin of 0 auto; this will center align the div. I hope that helped!