This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 6 years ago.
I'm running into this issue where there's a gap between two div tags. Here's my code -- I've tried to manually overwrite the margin/padding associated with the two divs and doesn't seem like it helps.
Here's what the CSS look like
.left_block{
display: inline-block;
background-color: blue;
width:40%;
height: 2em;
margin: 0px;
margin-right: 0px;
padding-right: 0px;
border-width: 0px;
overflow: hidden;
}
.right_block{
margin: 0px;
display: inline-block;
background-color: red;
width: 59%;
height: 2em;
margin-left: 0px;
padding-left: 0px;
border-width: 0px;
overflow: hidden;
}
Here's the HTML part
<div class="playground">
<div class = 'left_block'></div>
<div class = 'right_block'></div>
...
What am I missing?
What about using float property? Will it be a problem with your css?
.left_block {
display: inline-block;
background-color: blue;
width: 40%;
height: 2em;
margin: 0 auto;
padding: 0;
float: left;
}
.right_block {
display: inline-block;
background-color: red;
width: 60%;
height: 2em;
margin: 0 auto;
padding: 0;
overflow: hidden;
float: left;
}
<div class="playground">
<div class='left_block'></div>
<div class='right_block'></div>
</div>
Related
This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 2 years ago.
Run the snippet below, and you will see that these two balck boxes occupy more space than they need (vertically). Why is that so? I have tried settting margin / padding to 0, but it did not work.
div.ex4 {
display: block;
background-color: lightblue;
overflow: visible;
}
.imag {
width: 20px;
height: 20px;
background-color: black;
display: inline-block;
margin: 0px;
padding: 0px;
}
<div class="ex4"><div class="imag"></div><div class="imag"></div></div>
use font-size: 0;
div.ex4 {
display: block;
background-color: lightblue;
overflow: visible;
font-size: 0;
}
.imag {
width: 20px;
height: 20px;
background-color: black;
display: inline-block;
margin: 0px;
padding: 0px;
}
<div class="ex4"><div class="imag"></div><div class="imag"></div></div>
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 5 years ago.
My html has 2 sections, margin is zero but it still showing
.box1 {
width: 300px;
height: 450px;
background-color: green;
border: 0px;
display: inline-block;
margin: 0;
padding: 0px;
}
.box2 {
width: 150px;
height: 300px;
background-color: purple;
border: 0px;
display: inline-block;
margin: 0;
padding: 0px;
}
<body>
<div class="box2"></div>
<div class="box1"></div>
</body>
this is result
It is not the margin. It is the new lines converted to "spaces" when displaying it.It is because of the display:inline-block of the div . You can either remove the space or remove that with comments <!-- --> between the divs
.box1 { width: 300px;
height: 450px;
background-color: green;
border: 0px;
display: inline-block;
margin: 0;
padding: 0px; }
.box2 { width: 150px;
height: 300px;
background-color: purple;
border: 0px;
display: inline-block;
margin: 0;
padding: 0px;}
<div class="box2"></div><!--
--><div class="box1"></div>
This question already has answers here:
How to align a <div> to the middle (horizontally/width) of the page [duplicate]
(27 answers)
Closed 7 years ago.
I'm trying to get everything centered horizontally but no go.I feel like it's because of the floats but if I remove them then the left_wrap and right_wrap don't sit beside each other.
https://jsfiddle.net/ydt17yvz/
.main_wrap {width:100%;}
.main_wrap_2 { position:relative;margin:0 auto;}
.left_wrap {background-color:#fff; width: 50%;
max-width: 930px; position:relative;float:left;}
.right_wrap {background-color:#fff; width: 50%;
max-width: 930px; margin-top:80vh;position:relative;float:left;}
You should use inline block, putting comment in the center of your 2 block (since else it'll count as a in your html document and will break the 50% 2 column layout)
Fiddle:
https://jsfiddle.net/dLgej4tx/3/
.main_wrap {
width: 100%;
}
.main_wrap_2 {
position: relative;
margin: 0 auto;
}
.left_wrap {
background-color: #fff;
display: inline-block;
width: 50%;
max-width: 930px;
position: relative;
vertical-align: top;
}
.right_wrap {
background-color: #fff;
display: inline-block;
width: 50%;
max-width: 930px;
margin-top: 80vh;
position: relative;
text-align: center;
vertical-align: top;
}
.carousel_wrap {
width: 92%;
margin-top: 80vh;
}
.content_wrap {
margin-top: 0px;
padding: 0;
position: relative;
clear: both;
}
.content {
margin: 0;
padding: 0;
font-family: 'Helvetica LT Std';
font-size: 12px;
line-height: 1.5;
width: 280px;
}
You will see, it'll make all your interaction easier and it will work as expected
This question already has answers here:
CSS Margin Collapsing
(2 answers)
Closed 7 years ago.
I have this code:
<div class='block'>
<div class='container'></div>
</div>
.block {
display: block;
height: 100px;
width: 100px;
background: black;
}
.container {
display: block;
width: 30px;
height: 30px;
background: red;
margin: 50px;
}
I can not understand why margin does not work inside the block?
JsFiddle: https://jsfiddle.net/39yy7a0q/
Try below css. I have added position to .container, and adjusted margin value as it should relevant to parents width. https://jsfiddle.net/39yy7a0q/4/
.block {
display: block;
height: 100px;
width: 100px;
background: black;
}
.container {
display: block;
position:absolute;
width: 30px;
height: 30px;
background: red;
margin: 35px;
}
This question already has answers here:
My inline-block elements are not lining up properly
(5 answers)
Closed 6 years ago.
I have an image with a container next to it and I am having issues getting them aligned properly. I have used inline-block throughout the rest of the website and had no issues with it.
If anyone knows how I would fix this, that would be amazing.
Here is my code:
.talentcontainer {
width: 960px;
height: auto;
margin: 0 auto;
background-color: #fff;
}
.talentimg {
width: 250px;
height: 280px;
max-width: 80%;
text-align: center;
display: inline-block;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
/* future proofing */
-khtml-border-radius: 10px;
/* for old Konqueror browsers */
overflow: hidden;
margin: 0 auto;
}
.talentcontent {
width: 450px;
height: auto;
max-width: 80%;
text-align: center;
display: inline-block;
background-color: #000;
margin: 0 auto;
min-height: 280px;
margin: 0 auto;
}
<div class="talentcontainer">
<div class="talentimg">
<img src="http://i.gyazo.com/1d998394554d8c58d5b504ff959c3528.png">
</div>
<div class="talentcontent">
<h8>NAME HERE</h8>
</div>
</div>
And h is an image of the issue that I am having:
Use vertical-align: top alongwith display: inline-block.
.talentcontainer {
width: 960px;
height: auto;
margin: 0 auto;
background-color: #fff;
}
.talentimg {
width: 250px;
height: 280px;
max-width: 80%;
text-align: center;
display: inline-block;
vertical-align: top;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
/* future proofing */
-khtml-border-radius: 10px;
/* for old Konqueror browsers */
overflow: hidden;
margin: 0 auto;
}
.talentcontent {
width: 450px;
height: auto;
max-width: 80%;
text-align: center;
display: inline-block;
vertical-align: top;
background-color: #000;
margin: 0 auto;
min-height: 280px;
margin: 0 auto;
}
<div class="talentcontainer">
<div class="talentimg">
<img src="http://i.gyazo.com/1d998394554d8c58d5b504ff959c3528.png">
</div>
<div class="talentcontent">
<h8>NAME HERE</h8>
</div>
</div>
You can do this by floating the elements as well.
add floating left for both elements.
.talentimg{
float:left;
}
.talentcontent{
float:left;
}