This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 3 years ago.
So I'm trying to build a basic layout for my site and I've run into a problem. The problem is some margins that I can't figure out where they're coming from.
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<link href="/css/style.css?v=0.1" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Noto+Serif|PT+Serif" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<link rel="icon" href="/images/favicon.png" type="image/png">
</head>
<body>
<div class="wrapper">
<div class="sidebar">
<p>sidebar</p>
</div>
<div class="main">
<p>main</p>
</div>
</div>
</body>
</html>
style.css:
/* set defaults */
html, body, div {
background-color: white; /* Was #eee or #ccc */
/*font-size: 16px;*/
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
color: white;
font-family: 'PT Serif', serif;
/*font-family: 'Noto Serif', serif;*/
box-sizing: border-box;
}
.wrapper {
width: 100%;
max-width: 1200px;
height: auto;
padding: 0;
margin: 0;
border: 0;
outline: 0;
}
.main {
width: 80%;
height: 100px;
color: white;
margin: 0;
padding: 0;
border: 0;
outline: 0;
background-color: black;
display: inline-block;
}
.sidebar {
width: 20%;
height: 100px;
color: black;
margin: 0;
padding: 0;
border: 0;
outline: 0;
background-color: lightgrey;
display: inline-block;
}
p {
margin: 0;
padding: 0;
}
So when I render the page as shown I get:
But when I set the width on the sidebar to 19% I get:
As you can see I'm getting some margins to the right of both elements. I have no idea where this is coming from and the inspector is telling me I have no margins! Margin, padding, border and outline are all set to zero so I have no idea where this is coming from. Is there something I'm missing?
Edit: I should have said I'm trying to get the elements to display next to each other without wrapping.
Reason for this beacuse inline elements respect the word spacing between divs in the html. The space between first and second create an actual gap that you can see on the page.
You can easily remove this by removing the space between inline divs in the html.
div {
display: inline-block;
width: 50%;
}
<div style="background: green">Width: 50%</div><div style="background: red">Width: 50%</div>
But I hope this is not you are expecting, do not worry there are some otherways as well :)
font-size: 0;
gap between the two divs is due to word spacing therefore adding font-size: 0 to the parent container will remove the gap between the two divs.
.wrapper {
width: 100%;
font-size: 0
}
div {
display: inline-block;
width: 50%;
}
<div class='wrapper'>
<div style="background: green; font-size: 14px" class="sidebar">Width 50%</div>
<div style="background: red; font-size: 14px" class="main">Width 50% </div>
</div>
display: flex this method only suppport IE > 10 versions, you can apply display: flex to the parent container and apply relavent widths accordingly to child divs.
.wrapper {
display: flex;
}
.main {
width: 80%
}
.sidebar {
width: 20%
}
<div class='wrapper'>
<div style="background: green" class="sidebar">Width 20%</div>
<div style="background: red" class="main">Width 80% </div>
</div>
Actually here you are not getting the margin issue when you have two elements that has width:19% and width:80%, the remaining width:1% gets the gap that you mentioned as margin.
Simply set float:left; to both sidebar and main classes that avoid the margin issue. No need to change the width.
html,
body,
div {
background-color: white;
/* Was #eee or #ccc */
/*font-size: 16px;*/
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
color: white;
font-family: 'PT Serif', serif;
/*font-family: 'Noto Serif', serif;*/
box-sizing: border-box;
}
.wrapper {
width: 100%;
max-width: 1200px;
height: auto;
padding: 0;
margin: 0;
border: 0;
outline: 0;
}
.main {
width: 80%;
height: 100px;
color: white;
margin: 0;
padding: 0;
border: 0;
outline: 0;
background-color: black;
display: inline-block;
float: left;
}
.sidebar {
width: 20%;
height: 100px;
color: black;
margin: 0;
padding: 0;
border: 0;
outline: 0;
background-color: lightgrey;
display: inline-block;
float: left;
}
p {
margin: 0;
padding: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link href="/css/style.css?v=0.1" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Noto+Serif|PT+Serif" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<link rel="icon" href="/images/favicon.png" type="image/png">
</head>
<body>
<div class="wrapper">
<div class="sidebar">
<p>sidebar</p>
</div>
<div class="main">
<p>main</p>
</div>
</div>
</body>
</html>
You have forgot to add the float. Please add the following css to your css so that it wont take margin
.sidebar, .main{ float:left; }
if you usnig float:left instead of display: inline-block; your margin will remove
Related
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 1 year ago.
I want to place two Div so that they both can cover whole body width.
But, while writing the code provided below, a space is taking place between both Div.
Why is it so?
How to get rid off the space created between two Div'(s).
body {
margin: 0;
padding: 0;
box-sizing: border-box;
width: 100%;
background-color: red;
}
.container {
display: block;
width: 100%;
height: 100vh;
margin: auto;
margin-bottom: 0;
padding: 0;
background-color: rgba(73, 73, 73, 0.603);
box-sizing: border-box;
}
#subcontainer1 {
display: inline-block;
margin: 0;
padding: 0;
height: 99vh;
width: 25%;
background-color: antiquewhite;
box-sizing: border-box;
}
#subcontainer2 {
display: inline-block;
margin: 0;
padding: 0;
height: 99vh;
width: 74%;
box-sizing: border-box;
background-color: white;
}
<!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>
<body>
<div class="container">
<div id="subcontainer1"></div>
<div id="subcontainer2"></div>
</div>
</body>
</html>
Inline elements are sensitive to the white space in your code. Simply remove it:
body {
margin: 0;
padding: 0;
box-sizing: border-box;
width: 100%;
background-color: red;
}
.container {
display: block;
width: 100%;
height: 100vh;
margin: auto;
margin-bottom: 0;
padding: 0;
background-color: rgba(73, 73, 73, 0.603);
box-sizing: border-box;
}
#subcontainer1 {
display: inline-block;
margin: 0;
padding: 0;
height: 99vh;
width: 25%;
background-color: antiquewhite;
box-sizing: border-box;
}
#subcontainer2 {
display: inline-block;
margin: 0;
padding: 0;
height: 99vh;
width: 74%;
box-sizing: border-box;
background-color: white;
}
<div class="container">
<div id="subcontainer1"></div><div id="subcontainer2"></div>
</div>
You could do something like this instead. It's a simpler approach to achieve what you want.
*{margin:0!important;padding:0!important;}
.grid-container {
display: grid;
grid-template-columns: 25% 75%;
padding: 10px;
height:99vh;
}
<body style="background-color:red">
<div class="grid-container">
<div class="grid-item" style="background-color:antiquewhite"></div>
<div class="grid-item" style="background-color:white"></div>
</div>
</body>
If you use display:flex; on the container, there wouldn't be any gaps.
.container {
display: flex;
width: 100%;
height: 100vh;
margin: auto;
margin-bottom: 0;
padding: 0;
background-color: rgba(73, 73, 73, 0.603);
box-sizing: border-box;
}
And then you also do not need display:inline-block; seperately on the child elements.
The reason you get the spaces is because, well, you have spaces
between the elements (a line break and a few tabs counts as a space,
just to be clear).
To understand it better,and find possible number of solution, just go through this article from CSS-tricks Inline-block Issue
The one you can try however is: (In case you do not want to go with a flex-box solution):
.container {
font-size: 0;
}
.container div {
font-size: 16px;
}
when trying to add a <div> inside another it results in the main container to be pushed down and equal amount to the added <div>. I can fix the issue by setting the position of the added to absolute but I am trying to understand which attribute is causing this behavior.
https://imgur.com/t9Q0ocm
for example Adding the red <div> inside the purple <div> caused the purple <div> to be pushed down
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght#0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<title>Blue</title>
</head>
<body>
<aside class="side-menu"></aside>
<main class="main-content">
<div class="c-content">
<div class="c-content-text">
</div>
</div>
<div class="r-content">
<div class="r-content-text">
</div>
</div>
<div class="video-container"></div>
</main>
</body>
</html>
CSS
html {
font-family: Roboto, san serif;
font-size: 16px;
font-weight: normal;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
h1 {
font-size: 3.125rem;
line-height: 3.6875rem;
text-transform: uppercase;
color: #ffffff;
}
p {
font-size: 1rem;
font-family: Roboto;
color: #ffffff;
font-size: 16px;
line-height: 24px;
}
body {
background-color: #1458e4;
font-size: 0;
margin: 0;
padding: 0;
}
.side-menu {
width: 5%;
height: 100vh;
/* background-color: coral; */
position: sticky;
display: inline-block;
border-right: 1px solid rgba(255, 255, 255, 0.2);
}
.main-content {
background-color: cyan;
display: inline-block;
width: 95%;
}
.c-content {
background-color: rgb(184, 11, 184);
border-right: 1px solid rgba(255, 255, 255, 0.2);
display: inline-block;
width: 67%;
height: 100vh;
}
.r-content {
display: inline-block;
background-color: darkkhaki;
width: 33%;
height: 100vh;
padding: 25.4375rem 4.6875rem 19.1875rem 3.375rem;
}
.video-container {
background-color: lemonchiffon;
height: 68vh;
}
.c-content-text {
display: inline-block;
/* position: absolute; */
background-color: tomato;
width: 500px;
height: 500px;
}
.r-content-text {
background-color: turquoise;
width: 500px;
height: 500px;
}```
Remove display: inline-block in class c-content-text should also solved your issue.
I think this thread answer's your question Inline-block element height issue
AFAIK, the inline-block has relation with font-size and line-height, and you set the body to 0px, which makes lots of the issues hard to describe. E.g. Try to remove the font-size: 0px; from the body. And no matter you remove ('inline' or add absolute), the behavior is the same. Althought the page is still looks not good.
Last, i would suggest you to try the grid layout for your layout design, your scenario should be easy to implement with grid layout.
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 5 years ago.
I've tried for a while to understand why this code doesn't works as expected.
The following code should display a white stripe, green stripe, white stripe, without gap.
There's three divs inside a container, all 2 div are 20% width, one is 60% width, border, padding, margin is 0.
The question is why do I still see a "margin", between white and green block?
if you wanna give a try
https://jsbin.com/lexekimoba/edit?html,css,output
* {
margin: 0;
padding: 0;
border: 0px solid red;
}
body {
background-color: #888;
}
.container1 {
background-color: #aaa;
}
.main {
width: 60%;
background-color: green;
display: inline-block;
box-sizing: border-box;
}
.side {
box-sizing: border-box;
width: 20%;
display: inline-block;
background-color: white;
}
<div class="container1">
<div class="side">s</div>
<div class="main">
abcdef
</div>
<div class="side">s</div>
</div>
White space between two inline divs are considerable and visible.
Try removing all white spaces between inline divs.
For better explanation read this great article by css-tricks
Fighting the Space Between Inline Block Elements
Here's the deal: a series of inline-block elements formatted like you
normally format HTML will have spaces in between them.
Also, you may want to read Remove Whitespace Between Inline-Block Elements
It's due to the linebreaks between the DIVs (in the HTML code). If you remove those, it works:
* {
margin: 0;
padding: 0;
border: 0px solid red;
}
body {
background-color: #888;
}
.container1 {
background-color: #aaa;
}
.main {
width: 60%;
background-color: green;
display: inline-block;
box-sizing: border-box;
}
.side {
box-sizing: border-box;
width: 20%;
display: inline-block;
background-color: white;
}
<div class="container1">
<div class="side">s</div><div class="main">
abcdef
</div><div class="side">s</div>
</div>
Remove the white space between the divs
*{
margin: 0;
padding: 0;
border: 0px solid red;
}
body{
background-color: #888;
}
.container1{
background-color: #aaa;
}
.main{
width: 60%;
background-color: green;
display: inline-block;
box-sizing: border-box;
}
.side{
box-sizing: border-box;
width: 20%;
display: inline-block;
background-color: white;
}
<!DOCTYPE html>
<html>
<head>
<title>div align</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="divalign.css">
</head>
<body>
<div class="container1">
<div class="side">s</div><div class="main">
abcdef
</div><div class="side">s</div>
</div>
</body>
</html>
or use <!-- --> between the inline block elements.
*{
margin: 0;
padding: 0;
border: 0px solid red;
}
body{
background-color: #888;
}
.container1{
background-color: #aaa;
}
.main{
width: 60%;
background-color: green;
display: inline-block;
box-sizing: border-box;
}
.side{
box-sizing: border-box;
width: 20%;
display: inline-block;
background-color: white;
}
<!DOCTYPE html>
<html>
<head>
<title>div align</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="divalign.css">
</head>
<body>
<div class="container1">
<div class="side">s</div><!--
--><div class="main">
abcdef
</div><!--
--><div class="side">s</div><!--
--></div>
</body>
</html>
You can read more about it here
This question already has answers here:
margin on h1 element inside a div
(3 answers)
Closed 6 years ago.
I have a problem where my h1 tags gets seperated from the top of my page - like this: enter image description here
I'm still very new to HTML & CSS, so I'm asking for your help. Also, I DID look around to see other posts about this and I've tried ALOT, but i can't seem to get it to work.
Here is my CSS & HTML:
html {
height: 100%;
width: 100%;
}
body {
font-family: 'Montserrat', sans-serif;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.header{
background: url("../images/artboard1.jpg") no-repeat top center fixed;
background-size: cover;
height: 100vh;
width: 100%;
margin: 0;
padding: 0;
}
#logo {
color: #ffffff;
font-weight: 700;
font-size: 1rem;
float: left;
padding-left: 40px;
padding-top: 35px;
margin: 0;
}
nav {
float: right;
padding-top: 40px;
padding-right: 40px;
margin: 0;
}
a {
color: #ffffff;
font-weight: 400;
font-size: 80%;
text-decoration: none;
margin: 0 auto;
padding-left: 3rem;
}
.content_top {
margin: 0;
margin-top: 260px;
padding: 4rem 0 8rem 0; }
.sub_title, .under_title {
color: #ffffff;
text-align: center;
}
.sub_title {
font-weight: 400;
font-size: 0.85rem;
padding: 0 0 5px 0;
margin: 0;
}
.logo_middle {
display: block;
margin: 0 auto;
}
.under_title {
font-weight: 400;
font-size: 0.85rem;
padding: 5px 0 5px 0;
margin: 0;
}
.content {
background: url(../images/Untitled-2.png);
background-size: cover;
background-repeat: no-repeat;
background-color: #0D0E12;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.projekter {
background-color: #0D0E12;
margin: 0 auto;
padding 0 auto;
}
<html>
<head>
<title>Jakob Hoeg</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=0">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
</head>
<body>
<div class="header">
<header>
<a href="index.html"><img id="logo" src="images/logo_top.png" draggable="false"/>
<nav>
HJEM
PORTFOLIO
KONTAKT
</nav>
<div class="content_top">
<h4 class="sub_title">HEY, MIT NAVN ER</h4>
<img class="logo_middle" src="images/logo_big.png" draggable="false"/>
<h4 class="under_title">MULTIMEDIEDESIGN STUDERENDE</h4>
</div>
</header>
</div>
<section class="content">
<div id="content_cont">
<h1>Hello</h1>
</div>
</section>
<section class="projekter">
<div id="projekter">
<h1>Hello</h1>
</div>
</section>
</body>
</html>
Heh, it's a very interesting effect - "margin collapsing".
h1 has default margin-top.
Parent and first/last child
If there is no border, padding, inline content, or clearance to
separate the margin-top of a block from the margin-top of its first
child block, or no border, padding, inline content, height,
min-height, or max-height to separate the margin-bottom of a block
from the margin-bottom of its last child, then those margins collapse.
The collapsed margin ends up outside the parent.
To solve this problem add padding-top to container or replace header margin-top with padding-top. Also can set h1 margin-top to 0.
You can read more about it here.
could you add this style. It'll works.
#content_cont h1 { margin-top:0; }
Try not to set width and height for every objects. As other answers say you can move objects using margin in css. But my concern is adding unnecesary styles like width and height 100% for html, body, content and ... bringing some conflict to your design.
tl;dr - How can I center the blue div found in the third image in the white space, not the page?
I've been experiencing quite the headache recently. I've created a website with two distinct columns, but, is achieved with only one div element. This can be seen below.
It's pretty obvious from the picture that the first column is to be regarded as a sidebar, and hence, has the class .sidebar. .sidebar has a fixed width property of 400px. The rest of the page is simply the rest of the div with the class .container, which extends to 100% on both its width and height
properties. As I would image this is hard to image from just reading this text, I've found a way to illustrate how the page is setup.
Gray is the html element.
White is the body element.
The aqua on white is the div with the class .container.
The following aqua is the div with the class .sidebar.
Let's now insert the div that's giving me issues.
As you can see, a single blue div has been added. This has the class .test, and which simply sets the width, height, and margin properties. As you can now see, when the margin is set to 0 auto, the div is centered to the window and not the white space. Obviously this is the expected action.
The issue I'm facing is that I have no idea how I can center the blue div in the white space. I'm not sure how I would create anything the exact width of the white space, and hence, don't know how margin: 0 auto would be any use. How would I center my test element in the white space? Can this be achieved through CSS and HTML?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Welcome.</title>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300|Raleway' rel='stylesheet' type='text/css'>
<link href="https://www.codekaufman.com/assets/css/core.css" rel="stylesheet" type="text/css" />
<link href="https://www.codekaufman.com/assets/css/alerts.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="banner-alert">Please excuse the mess. I'm currently working to improve the site. Thanks.
</div>
<div class="container">
<div class="side-bar">
<div class="temp-logo"></div>
<ul class="nav">
<li class="nav-button-disabled">About</li>
<li class="nav-button-disabled">GitHub</li>
<li class="nav-button-disabled">Contact</li>
</ul>
<div class="emphasis-button-disabled">Support</div>
<div class="legal">Copyright © 2015 Jeffrey Kaufman. All Rights Reserved.</div>
</div>
<div class="test"></div>
</div>
</body>
</html>
#charset "utf-8";
* {
margin: 0;
padding: 0;
font-family: "Raleway", sans-serif;
color: #000;
}
html, body {
width: 100%;
height: 100%;
}
a {
text-decoration: none;
color: inherit;
}
.container {
height: 100%;
}
.side-bar {
position: fixed;
top: 0;
left: 0;
width: 400px;
height: 100%;
background: #EEE;
}
.temp-logo {
width: 200px;
height: 200px;
margin: 0 auto;
margin-top: 150px;
background: #000;
}
.nav {
width: 200px;
margin: 0 auto;
margin-top: 75px;
list-style-type: none;
}
.nav-button {
margin-top: 20px;
margin-bottom: 20px;
font-size: 1.6em;
cursor: pointer;
transition: 0.5s;
}
.nav-button:hover {
margin-left: 20px;
}
.nav-button-disabled {
margin-top: 20px;
margin-bottom: 20px;
font-size: 1.6em;
cursor: default;
color: #AAA;
}
.nav-category {
margin-top: 40px;
margin-bottom: 20px;
font-size: 2em;
cursor: default;
border-bottom: 1px #000 solid;
}
.emphasis-button {
text-align: center;
position: absolute;
width: 120px;
height: 45px;
left: 138px;
line-height: 45px;
bottom: 70px;
border-radius: 5px;
border: 1px solid #C30;
color: #C30;
transition: 0.4s;
cursor: pointer;
}
.emphasis-button-enabled {
text-align: center;
position: absolute;
width: 120px;
height: 45px;
left: 138px;
line-height: 45px;
bottom: 70px;
border-radius: 5px;
border: 1px solid #C30;
transition: 0.4s;
cursor: pointer;
color: #EEE;
background: #C30;
}
.emphasis-button-disabled {
text-align: center;
position: absolute;
width: 120px;
height: 45px;
line-height: 45px;
left: 138px;
bottom: 70px;
border-radius: 5px;
border: 1px solid #AAA;
color: #AAA;
cursor: default;
}
.emphasis-button:hover {
color: #EEE;
background: #C30;
}
.legal {
font-family: 'Open Sans', sans-serif;
position: absolute;
font-size: 0.85em;
text-align: center;
width: 400px;
height: 20px;
left: 0;
bottom: 20px;
}
.test {
width: 600px;
height: 200%;
background: blue;
margin: 0 auto;
}
Wrap it in another element with position=absolute, a right, top and bottom value of 0 and a left value of 400px:
<div style="position:absolute;right:0;top:0;bottom:0;left:400px;">
<div class="test"></div>
</div>
Your side bar already have position fixed, so please add padding left to your container it will work
.container {
height: 100%;
padding-left: 400px; /*width of your .sidebar*/
}
try changing the width for a percentage and adding a new div that covers the rest of the white space so you can center the blue element on that new div.
.side-bar {
position: fixed;
top: 0;
left: 0;
width: 20%;
height: 100%;
background: #EEE;
}
.new-div{width:80%;float:left;}
Set the test inside the new div
<div class="new-div"><div class="test"></div></div>