This question already has answers here:
How to get rid of extra space below svg in div element
(9 answers)
Closed 4 years ago.
.wrapper {
width: 100px;
height: 100px;
overflow: auto;
background: red;
}
.inner {
width: 300px;
height: 150px;
background: blue;
}
<div class="wrapper">
<svg class="inner"></svg>
</div>
<div class="wrapper">
<div class="inner"></div>
</div>
see the demo above.
when scroll to the bottom, there is a red gutter which is the background of wrapper in case 1 and case 2 works fine.
Does anyone knows why and how to fix it?
The SVG is an image, so it behaves like any <image> and sits on the text baseline. So the space you are seeing is the space left below the text baseline for descenders etc.
To fix, just make the SVG display: block.
The second version works fine because <div>s are already display: block.
.wrapper {
width: 100px;
height: 100px;
overflow: auto;
background: red;
}
.inner {
display: block;
width: 300px;
height: 150px;
background: blue;
}
<div class="wrapper">
<svg class="inner"></svg>
</div>
<div class="wrapper">
<div class="inner"></div>
</div>
seems duplicate with this question
add display: block; to the svg element could solve the problem
Related
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Why is this inline-block element pushed downward?
(8 answers)
Closed 1 year ago.
<style>
#main {
width: 110px;
height: 110px;
}
#main div {
width:50px;
height: 50px;
border: 1px solid black;
display: inline-block;
}
</style>
<div id='main'>
<div>x</div>
<div>x</div>
<div>x</div>
<div></div>
</div>
I have a grid of divs set up just a like a checker board. The divs are either empty, or have a single unicode character inside of them.
When a character is removed from or added to the div, the spacing around the div is affected. (see snippet)
How can I stop this behavior? I would like for the content inside of the div to not affect the positioning or spacing around the div.
you can fix your code by adding vertical-align:top to your inner 4 divs
Don't use the display:inline-block, try with display:flex on the outer div.
Basic concepts of flexbox
This issue occurs because of the way that vertical-align is calculated. When no vertical-align is set, the default is baseline. However, when there is no text, baseline is calculated differently. See this answer.
Using FlexBox, as suggested by most of the other answers would obviously avoid this issue.
If you want to avoid FlexBox, probably the best option is to just set vertical-align explicitly, as suggested in DCR's answer.
Another method would be to wrap the inner text in a <span> and add position: absolute. This way, all the boxes effectively have the same size content, and the discrepancy is resolved. Here's an example:
<style>
#main {
width: 110px;
height: 110px;
}
#main div {
position:relative;
width:50px;
height: 50px;
border: 1px solid black;
display: inline-block;
}
#main div span {
position: absolute
}
</style>
<div id='main'>
<div><span>x</span></div>
<div><span>x</span></div>
<div><span>x</span></div>
<div><span></span></div>
</div>
Like Nicola Revelant said in their answer, you can use something like flexbox to make this work. Here's an example:
<style>
#main {
width: 110px;
height: 110px;
display: flex;
}
#main div {
display: flex;
flex-direction: column;
}
#main div div {
width: 50px;
height: 50px;
border: solid 1px black;
}
</style>
<div id='main'>
<div class="row1">
<div>x</div>
<div>x</div>
</div>
<div class="row2">
<div></div>
<div></div>
</div>
</div>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I have 4 images in a container. When I set the images to occupy 50% of the container, 2 stacks on top and 2 stacks on the bottom and it perfectly matches the edge on the container like I want. The problem occurs when I add margin. The images stack in one line meaning the margin made in too big for the container so they stack in one line
So I begin experimenting with decimals
I made the width of the images 49.5% and I set margin-right to 0.5%. The problem is the images on the right don't align with the container edge perfectly. There is still space on the edge and I cant add any more margin or width or else it stacks in one line because I am over 50%. Look at the blue part in the image.
My question I guess is how do I get the images to fit my container accurately. am I using the wrong units?
Picture of what I am talking about
.section1{
width: 100%;
height: 95vh;
background-color:;
}
.section1 .wrapper{
width: 94%;
height: 600px;
background-color: royalblue;
}
.section1 .card{
float: left;
width: 49.47%;
height: 300px;
margin-right: 0.53%;
color:white;
}
.pizza{
background: url(./img/main\ 1.jpg)no-repeat;
width:100%;
height: 100%
}
.burger{
background: url(./img/main\ 2.jpg)no-repeat;
width: 100%;
height:100%;
}
.pasta{
background: url(./img/main\ 3.jpg)no-repeat;
width: 100%;
height: 100%
}
.salad{
background: url(./img/main\ 4.jpg)no-repeat;
width:100%;
height: 100%;
}
<div class="section1">
<div class="wrapper">
<div class="card">
<div class="pizza">
<div class="itembox1">
<h1>PIZZA</h1>
</div>
</div>
</div>
<div class="card">
<div class="burger">
<div class="itembox1">
<h1>BURGERS</h1>
</div>
</div>
</div>
<div class="card">
<div class="pasta">
<div class="itembox1">
<h1>PASTA</h1>
</div>
</div>
</div>
<div class="card">
<div class="salad">
<div class="itembox1">
<h1>SALAD & FIT</h1>
</div>
</div>
</div>
</div>
</div>
You could use the :nth-child selector to only put the margin on the images that are first in the row. Example:
#image-wrapper *:nth-child(odd) {
margin-right: 10px;
}
#image-wrapper > * { /* Select all direct children of image-wrapper */
display: inline-block;
width: calc((100% - 10px) / 2); /* set image width to the half of (the parent #image-wrapper minus the margin) */
vertical-align: middle; /* to get rid of the extra vertical spacing */
}
#image-wrapper {
background-color: blue;
}
<div id="image-wrapper">
<img src="https://upload.wikimedia.org/wikipedia/commons/0/06/Block-inline.png?uselang=en"><img src="https://upload.wikimedia.org/wikipedia/commons/0/06/Block-inline.png?uselang=en"><img src="https://upload.wikimedia.org/wikipedia/commons/0/06/Block-inline.png?uselang=en"><img src="https://upload.wikimedia.org/wikipedia/commons/0/06/Block-inline.png?uselang=en">
</div>
Sorry for the unformatted HTML, but if i would format it correctly the browser would add some extra space inbetween the images; you can read about how to have the HTML indented correctly while having no extra spaces here
If i'm reading it correctly change this part to 100%.
.section1 .wrapper{
width: 100%;
height: 600px;
background-color: royalblue;
}
Add this to your CSS-Code:
* {
margin: 0;
padding: 0;
}
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 4 years ago.
I have a parent element (div) with a fixed width of 1200px. There are no borders or padding on this element.
I have three inline child elements (divs) with fixed widths of 400px. Again, no borders, padding or margins.
I want my three child elements to sit on the same line but instead the third one gets pushed down. If I reduce their widths to 397px they all sit on the same line.
Why can't I divide the width of a parent container exactly by the number of children I want to sit abreast within that container? Much the same way that I can't define those child elements as percentage widths that add up to 100% (ie four children of all 25% width)?
This happens due to the extra spacing cause by the white space in the code itself. You can fix it by either writing the markup in a way that makes sure there are no white space or you can set the parent div's font-size to 0 so no white space is visible (make sure you then set the children div font's size back to normal)
In this example I've used the first method as it is cleaner
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
<div class="parent">
<div class="child"></div><div class="child"></div><div class="child"></div>
</div>
style
.parent {
width: 1200px;
background-color: #333;
margin: 20px 0; /* outer margin doesn't matter */
}
.parent .child {
width: 400px;
height: 300px;
display: inline-block;
background-color: #ccc;
}
The first box doesn't work, the second does as I've left no space between the closing and opening tags of the child elements
http://jsbin.com/cifedis/edit?output
You need to use float:left to your children in order to achieve this
.parent {
width: 1200px;
height: 200px;
background: pink;
}
.child {
float: left;
width: 400px;
display: inline-block;
background: red;
}
<div class="parent">
<div class="child">Child1</div>
<div class="child">Child2</div>
<div class="child">Child3</div>
</div>
You can add css like this=>
.parent_container{
width:1200px;
float:left;
}
.child1,
.child2,
.child3{
float:left;
width:400px;
display: inline-block;
}
inline-block elements (which I'm guessing you are using), by default, have a white space after them, which might cause the issue you are seeing.
There are a number of ways to remove this in the html itself, one of them being adding a comment between the two inline-block elements. I prefer this approach, as its more readable.
.parent {
width: 600px;
height: 50px;
background: grey;
}
.child {
display: inline-block;
width: 200px;
height: 50px;
background: pink;
}
<div class="parent">
<div class="child">1</div><!--
--><div class="child">2</div><!--
--><div class="child">3</div>
</div>
You can also start the divs in the same line, like below, forgoing the comment
<div>content</div><div>
content</div
There is lots of solution I prefer flexbox
.parent {
display: flex;
}
.child {
flex:1 1 400px;
background-color:red;
max-width: 400px;
height: 400px;
}
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
If you really want to use with inline-block either make font-size:0; to the parent or do not change the line while creating children element
.parent{
width:1200px;
}
.child {
background-color:red;
width: 400px;
height: 400px;
display: inline-block;
}
<div class="parent">
<!-- Do Not change line of children-->
<div class="child">1</div><div class="child">2</div><div class="child">3</div>
</div>
please read details https://css-tricks.com/fighting-the-space-between-inline-block-elements/
Just Give Parent Div Font Size 0px Below is the Code,
You Can Also do the same by float Left But This is the Best Way :)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pratice</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
.contaniner {
width:1200px;
font-size: 0px;
}
.threelock {
background: #000;
width: 400px;
height: 400px;
display: inline-block;
}
.yllow {
background: yellow;
}
.red {
background: red;
}
</style>
<body>
<div class="contaniner">
<div class="threelock"></div>
<div class="threelock red"></div>
<div class="threelock yllow"></div>
</div>
</body>
</html>
This question already has answers here:
How to Create Grid/Tile View? [duplicate]
(8 answers)
Closed 5 years ago.
I am creating a responsive dashboard with a fixed header and sidebar nav. I am trying to create the template depicted below but am having issues with div stacking:
Instead, I can only get them to stack like in this image here:
I have a wrapper around the divs that has the following styles:
width: 100%;
padding: 15px;
The divs themselves are wrapped in a container with the following styles:
display: inline-block;
width: 50%;
padding: 15px;
float: left;
vertical-align: top;
Apparently, vertical-align: top is supposed to solve this issue but I haven't been able to get the yellow div to the right position.
Any ideas?
.wrapper{
width: 100%;
padding: 15px;
height:100%;
}
.floating_div{
margin:10px;
float:left;
width: 45%;
height:300px;
display:inline-block;
vertical-align:top;
}
.m-t{
margin-top:15px;
}
.blue_bg{
background:blue;
}
.green_bg{
background:green;
}
.yellow_bg{
background:yellow;
}
.floating_div .inner_div{
height:150px;
}
<div class="wrapper">
<div class="floating_div">
<div class="inner_div blue_bg">Inner Div 1</div>
<div class="inner_div yellow_bg m-t"> Inner DIv 2</div>
</div>
<div class="floating_div green_bg ">
Left Div 2
</div>
</div>
Is this the same that you are looking for?
Here is JSFiddle
Hope this helps.
This should do it for you:
https://jsfiddle.net/hncuyy6o/1/
`<div class="wrapper">
<div class="hai">
<div class="one"></div>
<div class="three"></div>
</div>
<div class="two"></div>
</div>`
CSS:
.wrapper{
width: 100%;
padding: 15px;
}
.hai{
display: inline-block;
}
.one{
vertical-align: top;
width: 200px;
height: 300px;
background-color: blue;
display: inline-block;
}
.two{
vertical-align: top;
width: 200px;
height: 400px;
background-color: red;
display: inline-block;
}
.three{
width: 200px;
height: 300px;
background-color: yellow;
display: block;
position: absolute;
}
Hope that helps.
You can Javascript Masonry Grid Layout to achieve that.
Masonry is a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You’ve probably seen it in use all over the Internet.
Using Masonry Library, its simple as this.
<div class="grid">
<div class="grid-item">...</div>
<div class="grid-item">...</div>
<div class="grid-item">...</div>
</div>
Jquery:
$('.grid').masonry({
// options
itemSelector: '.grid-item',
columnWidth: 200
});
Simplest way to achieve that is wrapping yellow and blue box with another div.
It works unless You have media queries changing layout much. Another thing is to use flexbox with colums.
I have 3 floated divs on the first "row", the two first divs have a height of 100px, and the third div has a height of 200px. Anything I add after the first row won't fill the whitespace created from the third div.
CSS:
#container {
overflow: hidden;
width: 440px;
margin: -5px;
}
#container div {
background-color: gray;
height: 100px;
width: 100px;
margin: 5px;
float: left;
}
#container #widget2 {
width: 210px;
}
#container #widget3 {
height: 200px;
}
HTML:
<div id="container">
<div id="widget1">1</div>
<div id="widget2">2</div>
<div id="widget3">3</div>
<div id="widget4">4</div>
<div id="widget5">5</div>
<div id="widget6">6</div>
<div id="widget7">7</div>
</div>
widget3 somehow creates unusable space, so that widget4 to 6 are far away and it generally looks weird.
You can see what I mean here: http://jsfiddle.net/SGdG3/80/
I want the red boxes to be "pushed" up to use the white space.
Basically this is how Floated elements behaves. if you want to fill the space, then you have go for absolute positioning with Javascript. Here is a Beautiful JQuery plugin for your solution.