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.
Related
This question already has answers here:
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 10 months ago.
This post was edited and submitted for review 10 months ago and failed to reopen the post:
Original close reason(s) were not resolved
I have div with Material Design icon (span) and I wanna center this icon correctly to fix the gap (see screenshot). What's the way to do that? (I tried text-align on items div, but it doesn't work)
#import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
body {
margin: 0;
font-family: 'Roboto', sans-serif;
}
header {
display: flex;
justify-content: space-between;
box-sizing: border-box;
width: 100%;
padding: 1em;
background: #3378FF;
color: white;
}
.right_panel {
align-items: center;
}
.title {
font-size: 24px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<header>
<div class="title">Shop</div>
<div class="right_panel">
<span class="material-icons">
account_circle
</span>
</div>
</header>
<div></div>
</body>
</html>
You can add an empty <div></div> after <div class="right_panel></div> so flex will set icon in center
<header>
<div class="title">Shop</div>
<div class="right_panel">
<div class="items">
<span class="material-icons">
account_circle
</span>
</div>
</div>
<div>
<!-- This will stay in right so icon can be in center -->
</div>
</header>
In the current case you can set the left and right margins of div.right_panel to auto or just:
.right_panel {
margin: auto;
}
This question already has answers here:
How to make an element width: 100% minus padding?
(15 answers)
CSS: Width in percentage and Borders
(5 answers)
Closed 2 years ago.
<html>
<head>
<link rel="stylesheet" href="teste.css">
</head>
<body>
<header>
<div id="logo">logo</div>
<div class="menu">
option 1
option 2
option 3
option 4
</div>
<div class="menu">
option 5
</div>
</header>
</body>
</html>
css:
#font-face{
font-family: MuseoModerno;
src: url(fonts/MuseoModerno-VariableFont_wght.ttf);
}
body{
font-family: MuseoModerno;
font-size: 12pt;
margin: 0px;
width: 100%;
background-color: orangered;
}
header{
padding: 1rem;
background-color: orchid;
width: 100%;
position: absolute;
display: flex;
justify-content: space-between;
}
why this code creates a scroll bar?The width property in 100% shouldn't force the header to fit the flex content in the window width? What css is understanding in this code. How can i fix it?
Add this to your code:
* {box-sizing: border-box;}
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>
I have an issue regarding the positioning of a div on my page. I would like to have it underneath my other two elements, but everything I have tried previously has not worked - even though the internet seemed to tell me that it should.
Here is my code:
#headingmain {
position: relative;
top: 150px;
font-family: Comic Sans MS;
}
#main {
margin: 0 auto;
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#para {
position: relative;
top: 150px;
font-family: Comic Sans MS;
}
#test {font-family: Comic Sans MS;}
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1 align="center" id="headingmain">Title</h1>
<p id="para" align="center">para</p>
<div id="main" align="center">
<p id="test">Test</p>
</div>
</body>
</html>
I cannot for the life of me find a tutorial on the internet that will position the div underneath the other two elements. This was my last resort, and I am thankful for any help you guys can provide.
Thanks again!
This is a very simple fiddle with the positioning you are trying to achieve: http://jsfiddle.net/eh8ff325/3/
As you can see there are two nested div ( #one > #two ) and the #three div positioned below.
<main>
<div id="one">One
<div id="two">
Test
</div>
</div>
<div id="three">Three</div>
</main>
All the three div are inside a container which do the horizontal alignment and some top margin.
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.