This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Image inside div has extra space below the image
(10 answers)
Closed 4 years ago.
Take a look at the code.
There is white space below div that contains image.
How can I remove it?
If I delete doctype, white space would be removed. But I need doctype.
Edit: Also I want .container to be "inline-block" and changing It to "block" will just replace the space from below div to the lower part of the .container and won't remove it.
Sorry for bad English.
<!doctype html>
<head>
<style>
* {
margin: 0;
padding: 0;
}
.container {
display: inline-block;
width: 100%;
background: #000;
color: #fff;
}
.container img {
display: block;
}
</style>
</head>
<div class="container">
<img src="https://openclipart.org/assets/images/images/openclipart-banner.png" />
</div>
<div class="container">
123
</div>
Use block for .container.
<!doctype html>
<head>
<style>
* {
margin: 0;
padding: 0;
}
.container {
display: block;
background: #000;
color: #fff;
}
.container img {
display: block;
}
</style>
</head>
<div class="container">
<img src="https://openclipart.org/assets/images/images/openclipart-banner.png" />
</div>
<div class="container">
123
</div>
Just add vertical-align: top to .container class.
Add block to your container:
.container {
display: block;
width: 100%;
background: #000;
color: #fff;
}
Adding display:block; to the element should solve the issue.
Related
This question already has answers here:
Text floating in block next to image
(6 answers)
Closed 4 years ago.
Here is my problem(want to make that kind of thing):
Half screen image and half screen text;
That block with image and paragraph must be 50% of page;
Here is my code
.img-responsive {
display: block;
max-width: 100%;
height: auto;
}
<div class="info">
<img src="media/images/pexels-photo-316465.jpeg" alt="#" class="img-responsive">
<p>sample text</p>
</div>
use this in your css
float:left;
However; if you'd like it to be in a nicer format, you should use bootstrap which will also let you divide your layout into two section side by side.
Try this CSS instead:
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.info {
font-size: 0;
}
.info img,
.info p {
width: 50%;
display: inline-block;
}
.info p {
font-size: 14px;
}
Demo: http://jsfiddle.net/GCu2D/3372/
This question already has answers here:
How wide is the default `<body>` margin?
(4 answers)
How do I remove the top margin in a web page?
(18 answers)
How do I remove the space between div and top of page?
(5 answers)
Closed 4 years ago.
My black box in this example should be all the way to the left and all the way up. I don't want to see any white space left or above of it.
#box {
width: 200px;
height: 200px;
margin-left: 0px;
background-color: black;
}
<div id="box"></div>
But that isnt the case! Can anyone tell me how I can achive this?
In most major browsers, the default margin is 8px on all sides. It is defined in pixels by the user-agent-stylesheet your browser provides.
You need to give margin:0 to body like this
body,html {
margin: 0;
padding:0;
}
<body>
<div id="box"></div>
</body>
<style>
#box {
width: 200px;
height: 200px;
margin-left: 0px;
background-color: black;
}
</style>
P.S Also set padding to 0 for both html and body
You need to add 0 margin to body and html as well
body, html{
margin:0;
}
#box{
width: 200px;
height: 200px;
margin-left: 0px;
background-color: black;
}
<body>
<div id="box"></div>
</body>
You also need to remove the default margin on the body element.
#box {
width: 200px;
height: 200px;
margin-left: 0px;
background-color: black;
}
body {
margin:0;
}
<div id="box"></div>
This question already has answers here:
Css height in percent not working [duplicate]
(8 answers)
Percentage Height HTML 5/CSS
(7 answers)
Closed 5 years ago.
I am attempting the following solution described at https://stackoverflow.com/a/22218694/1175080.
Alternatively, instead of aligning the content via the container, flexbox can also center the a flex item with an auto margin when there is only one flex-item in the flex container (like the example given in the question above).
Here is my solution.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style>
main {
display: flex;
height: 100%;
background: lightgreen;
}
section {
margin: auto;
background: yellow;
}
</style>
</head>
<body>
<main>
<section>Foo</section>
</main>
</body>
</html>
It does not seem to work. The main element does not expand to occupy 100% height of the page. What am I doing wrong? How can this be made to work?
Used height:100vh
body {
min-height: 100vh;
margin: 0;
}
main {
display: flex;
height: 100vh;
background: lightgreen;
}
section {
margin: auto;
background: yellow;
}
<main>
<section>Foo</section>
</main>
Assign html, body with 100% width & height, Like:
html, body {
width: 100%;
height: 100%;
margin: 0;
}
Have a look at the snippet below:
html, body {
width: 100%;
height: 100%;
margin: 0;
}
main {
display: flex;
height: 100%;
background: lightgreen;
}
section {
margin: auto;
background: yellow;
}
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<main>
<section>Foo</section>
</main>
</body>
</html>
Hope this helps!
The main element will use the space allotted to by it's parents, which in this case are body > html.
Therefore, set both body and html to have a height of 100% as well and you should be golden.
html, body {
height: 100%;
}
This question already has answers here:
How do you keep parents of floated elements from collapsing? [duplicate]
(15 answers)
Closed 7 years ago.
Though it's a very simple HTML, CSS layout, I am facing problem with this. It does not look like what I want it to be.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<style>
body {
margin: 0;
padding: 100px;
width: 100%;
}
div.container {
border: 3px red solid;
padding: 10px;
display: block;
width: 1000px;
}
div.left, div.right {
float: left;
margin: 0 10px;
}
div.left {
background: blue;
height: 300px;
width: 300px;
}
div.right {
background: green;
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<div class="container">This is the main container
<div class="left">This is the left side</div>
<div class="right">This is the right side</div>
</div>
I want to know why left and right blocks overlaps the container element?
</body>
</html>
Why left and right blocks overlaps the container element?
I uploaded a screenshot of the code executed in Chrome on PC. Here is the Google Drive preview link: https://drive.google.com/open?id=0B4av_i4gqoZmRFpXbzVZekR0aGs&authuser=0
Thanks in advance.
Add this style in your CSS file:
.container:before,
.container:after {
display: table;
content: " ";
}
.container:after {
clear: both;
}
This should solve the Issue!
This question already has answers here:
display:inline-block and whitespace
(3 answers)
Closed 7 years ago.
I'm using the float style to remove white spaces and I want to center it, but another white space appears after my div#bar
This is my html:
<div id="foo">
<div id="bar">
<div class="divo divo1">test1</div>
<div class="divo divo2">test2</div>
<div class="divo divo3">test3</div>
<div class="divo divo4">test4</div>
</div>
</div>
and css:
#foo {
width: 100%;
background: #999;
text-align: center;
}
#bar {
display: inline-block;
}
.divo {
display: block;
float: left;
}
http://jsfiddle.net/Kodam/ay3ywtqa/
Note: I don't want to use negative margin or font-size 0 styles.
Since #bar is an inline element, it has space reserved for descender text elements (e.g. j, y, g). You could float that left, but that would collapse it, so I'd recommend setting the vertical alignment to top:
#bar {
display: inline-block;
vertical-align:top;
}
jsFiddle example
try this :
#foo {
width: 100%;
background: #999;
font-size:0;
text-align: center;
}
#bar {
display: inline-block;
font-size:13px;
}
set parent font-size to 0, then set the needed font-size to the children.
jsFiddle : http://jsfiddle.net/ay3ywtqa/3/