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
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;
}
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
This question already has answers here:
Display a div width 100% with margins
(6 answers)
Closed 3 years ago.
I just want to make my button expands full width to its container with some margin to itself, but it's not working. I have tried box-sizing: border-box, but as you can see in the snippet, still no luck because notice the right-side of the button, it's like overshoot..
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
.cont {
width: 100vw;
background-color: white;
}
.block {
margin: 10px;
display: block;
width: 100%;
background-color: #4CAF50;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<div class="cont">
<button class="block">Block Button</button>
</div>
</body>
</html>
That is because when the width is already 100%. Adding 10px margin to the left will cause it to be 100% + 10px, therefore overshoots the width of the container. Alternatively, you can add 10px padding to the container instead.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
.cont {
width: 100vw;
background-color: white;
padding: 10px; /*Added Padding*/
}
.block {
/*margin: 10px;*/
display: block;
width: 100%;
background-color: #4CAF50;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<div class="cont">
<button class="block">Block Button</button>
</div>
</body>
</html>
Please remove the following commented CSS and it will work absolutely fine,
* {
box-sizing: border-box;
}
.cont {
/* width: 100vw; */
background-color: white;
width: 100%;
}
.block {
/* margin: 10px; */
display: block;
width: 100%;
background-color: #4CAF50;
color: white;
padding: 10px;
}
please try this.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.block {
/*margin: 10px;*/
display: block;
width: 100%;
background-color: #4CAF50;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<div class="cont">
<button class="block">Block Button</button>
</div>
</body>
</html>
I'm learning css and html and i have this problem, where the margin-left and margin-right in the ".logo" div class don't want to center the div. Please help because i done reserch, i checked the code and everything looks good, so I have no idea whats going on.
body
{
background-color: #303030;
color: #ffffff;
}
.wrapper
{
width:100%;
}
.header
{
width:100px;
padding:40px 0;
}
.logo
{
width:450px;
font-size:48px;
border: 1px solid white;
margin-left: auto;
margin-right: auto;
}
<html lang="pl">
<head>
<meta charset="utf-8"/>
<title>site</title>
<link rel="stylesheet" href="style.css" type="text/css"/>
</head>
<body>
<div class="wrapper">
<div class="header">
<div class="logo">
LOGO
</div>
</div>
</div>
</body>
</html>
Your header is only 100px while your logo is 450px, you can check this fiddle for demo.
.wrapper {
width: 100%;
}
.header {
width: 1000px;
padding: 40px 0;
}
.logo {
width: 450px;
font-size: 48px;
border: 1px solid white;
margin-left: auto;
margin-right: auto;
}
I want to have two div boxes one at left and another at right corner.
With the help off following code it comes but both are not in same align.
It comes one after another.
Here is my code
<style>
html { margin:0; padding:0; font-size:62.5%; }
body { max-width:300px; font-size:14px; font-size:1.4em; }
h1 { font-size:1.8em; }
.demo { overflow:auto; border:1px solid silver; min-height:100px;min-width: 200px;float: left }
.demo1 { overflow:auto; border:1px solid silver; min-height:100px;min-width: 200px; float: right}
</style>
<link rel="stylesheet" href="style.min.css" />
</head>
<body><div id="frmt" class="demo"></div>
<div id="frmt1" class="demo1"></div>
</body>
So it comes like
and I want it to look like
It's because of max-width: 300px; in you body. Removing that would do the trick.
demo and demo1 are having a min-width of 200px each, summing to 400px. But the body have a max-width of only 300px.
<head>
<style>
html {
margin: 0;
padding: 0;
font-size: 62.5%;
}
body {
font-size: 14px;
font-size: 1.4em;
}
h1 {
font-size: 1.8em;
}
.demo {
overflow: auto;
border: 1px solid silver;
min-height: 100px;
min-width: 200px;
float: left
}
.demo1 {
overflow: auto;
border: 1px solid silver;
min-height: 100px;
min-width: 200px;
float: right
}
</style>
<link rel="stylesheet" href="style.min.css" />
</head>
<body>
<div id="frmt" class="demo"></div>
<div id="frmt1" class="demo1"></div>
</body>
Flex is becoming more and more common place and means you don't have to have your boxes so far apart
.demo-container {
display: flex;
align-items: center;
}
.demo {
overflow: auto;
border: 1px solid silver;
min-height: 100px;
min-width: 200px;
}
.demo-button {
height: 25px;
margin: 20px;
}
<div class="demo-container">
<div id="frmt" class="demo"></div>
<button class="demo-button">>></button>
<div id="frmt1" class="demo"></div>
</div>
I know your question had already been answered, but there is always more than one way to solve a problem :-)
Try this
<body><div id="frmt" class="demo" style="float:left;"></div>
<div id="frmt1" class="demo1" style="float:right;"></div>
</body>