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>
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 can I horizontally center an element?
(133 answers)
Closed 3 years ago.
I need to use the calc function for width but it doesn't divide distance around.
HTML
<div class="container-card">
<div class="container-holder"></div>
</div>
SCSS
.container-card {
background-color: grey;
height: 500px;
.container-holder {
background-color: gold;
width: calc(100% - 14px);
height: 300px;
}
}
Here is an example:
https://jsfiddle.net/fze3L0w8/
In other words: I need 14px distance from left and right in every width.
You can use margin:auto; for adding space from both side. And you need to set it 100% - 28px
.container-card {
background-color: grey;
height: 500px;
}
.container-holder {
background-color: gold;
width: calc(100% - 28px);
height: 300px;
margin: auto;
}
<div class="container-card">
<div class="container-holder">
</div>
</div>
Just set a margin of 14px, and you will no longer need to set the width property:
.container-card {
background-color: grey;
height: 500px;
.container-holder {
background-color: gold;
margin: 14px;
height: 300px;
}
}
Here's an updated fiddle.
this is the solution:
background-color: gold;
width: calc(100% - 28px);
height: 300px;
margin: auto;
you need margin from left o rright also
you either set it 100% - 28px to reduce width by 14px right and left and set margin: auto; to center the div
.container-card {
background-color: grey;
height: 500px;
.container-holder {
background-color: gold;
width: calc(100% - 28px);
margin: auto;
height: 300px;
}
}
or only set margin:0px 14px; and no need to set width it will take parent width - margin
.container-card {
background-color: grey;
height: 500px;
.container-holder {
background-color: gold;
margin: 0px 14px;
height: 300px;
}
}
More elegant solution is that -
.container-card {
background-color: grey;
height: 500px;
.container-holder {
background-color: gold;
width: calc(100% - 28px);
height: 300px;
margin: 0 auto;
}
}
Calc function will get 28px and to center an element inside another one. use margin: 0 auto;
Just center the container instead of this hard coded brittle approach with something like flex, then you can use whatever margin you want without it breaking.
.container-card {
display: flex;
justify-content: center;
background-color: grey;
height: 500px;
}
.container-holder {
background-color: gold;
margin: 0 14px;
width: 100%;
height: 300px;
}
<div class="container-card">
<div class="container-holder">
</div>
</div>
More elegant solution could be this
`
.container-card {
background-color: grey;
height: 500px;
.container-holder {
background-color: gold;
margin-left: 14px;
margin-right:14px;
height: 300px;
}
}
`
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>
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;
}
I have a strange behavior on my webpage layout.
When i add some more divs inside "sideBar" div, the central part of the webpage is pushed down. They are not related to the central part. They have borders and i see that they are far from 'main' div. Is there any way to prevent it or i should play with margins every time when i add a new div.
Here is my HTML code:
<div id="sideBarLeft">
<div id='article1'><h3>Article 1</h3><div> //Just added
<div id='article2'><h3>Article 2</h3><div> //Just added
<div id='article3'><h3>Article 3</h3><div> //Just added
<div id='article4'><h3>Article 4</h3><div> //Just added
</div>
CSS code:
#sideBarLeft {
position: fixed;
height: 800px;
width: 250px;
margin-top: 0px;
margin-left: 0px;
margin-right: 1px;
padding-top: 100px;
padding-left: 5px;
float: left;
word-wrap: break-word;
z-index: 1;
border: 1px solid #808080;
}
#article1 {
width: 200px;
border: 1px solid red;
}
Here is the central part:
#container{
margin: 0 auto;
margin-left: 256px;
max-width: 600px;
margin-top: 120px;
padding-left: 10px;
padding-right: 10px;
padding-top: 20px;
float: left;
width: 600px;
border: 1px dotted #808080;
}
Here is the wrapper:
#wrapper {
width: 1200px;
margin: 0 auto;
}
It is likely because you have something in the main div using clear:both;
Try changing it to clear:right; or remove it