When I add a border to a div, the content inside doesn't have 100% width and height anymore.
I already added padding: 0; and margin: 0; as well as box-sizing: border-box; but the background still shows up at some zoom levels.
Is this a browser bug? On Firefox the red background never shows up (but Firefox has different zoom levels, too).
red background
#outside {
box-sizing: border-box;
background: red;
border: 1px solid #808080;
border-radius: 12px;
height: 500px;
overflow: hidden;
padding: 0;
margin: 0;
}
#content {
background: green;
height: 100%;
padding: 0;
margin: 0;
}
<!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 id="outside">
<div id="content">
</div>
</div>
</body>
</html>
In browers there is some inner css
You can write in your css file
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
this style will be appliced for all document, not only for div id="outside".
I use also this file to apply the default code : Normalise.css
Related
This question already has answers here:
Display a div width 100% with margins
(6 answers)
Closed 9 months ago.
so I'm trying to make the input field like this
image to see what I want to expect
and for some reason box-sizing:border-box doesn't work
I'm using chrome browser
am I doing something wrong?
.....................
body {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}
#input-el {
box-sizing: border-box !important;
width: 100%;
margin-left: 10px;
margin-top: 10px;
margin-right: 10px;
border-style: solid ;
border-width: 2;
border-color: #5f9341;
background-color: rgb(214, 229, 248);
color: black;
}
#input-btn {
margin: 10px 10px 0px;
font-size: 20px;
border-style:solid;
border-color: #5f9341;;
background-color: #5f9341;
color: aliceblue;
}
<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" />
<link rel="stylesheet" href="index.css">
<title>chrome extension</title>
</head>
<body>
<!-- input field for writting inside -->
<div>
<input type="text" id="input-el" />
</div>
<!-- save button to save the input -->
<div>
<button id="input-btn">SAVE INPUT</button>
</div>
<script src="index.js"></script>
</body>
</html>
You should be doing this:
width: calc(100% - 20px);
I'm using a template for a weekly newsletter and I'm trying to keep all the images that get piped in to the newsletter to be the same size. Here's the current code:
<img src="xxx {{ content.thumbnail_uri }}" width="340"
style="margin: 0;
color: #222222;
font-family: Helvetica, Arial, sans-serif;
font-weight: normal;
line-height: 19px;
padding: 0;
text-align: left;
font-size: 14px;
margin-bottom: 0;
width: 100%;
height: auto;
max-width: 340px;" />
The problem is that when the template gets generated there is an introduction that pushes down the left column and the image height on that size gets squished down. Is there a way that I can guarantee that the images stay the same height and width while still keeping it responsive for mobile?
I'd do something like this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
}
* {
box-sizing: border-box;
}
.image-holder {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 1rem;
}
.image-holder img {
width: 100%;
}
</style>
<body>
<div class="image-holder">
<img src="https://cdn.pixabay.com/photo/2018/10/30/16/06/water-lily-3784022__340.jpg" alt="image1"/>
<img src="https://image.shutterstock.com/image-photo/colorful-flower-on-dark-tropical-260nw-721703848.jpg" alt="image2"/>
<img src="https://cdn.pixabay.com/photo/2018/05/28/22/11/message-in-a-bottle-3437294__340.jpg" alt="image2"/>
</div>
</body>
</html>
In the picture you can see that above name are 46px of space and below only 40px while the nav is 100px's high. I've set margin: 0;padding:0; and line-height:0; but it is still there and I can't find anything meaningful via the Chrome Devtools. Why is this happening and how can it be fixed?
See the problem
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
#topper {
position: relative;
height: 100px;
background-color: steelblue;
color: skyblue;
}
#name {
font-size: 30px;
position: absolute;
top: 50%;
transform: translateY(-50%);
line-height: 0;
}
</style>
</head>
<body>
<nav id="topper">
<h1 id="name">name</h1>
</nav>
</body>
</html>
This question already has answers here:
How to make an element width: 100% minus padding?
(15 answers)
Closed 4 years ago.
Can someone please explain the unexpected behavior for margin:0 style in body
Here's my code snippet:
<!DOCTYPE html>
<html>
<head>
<title>SVG Shapes</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body, html {
padding: 10px;
margin: 0;
}
svg {
width: 100%;
height: 100%;
padding: 15px;
border: 1px solid red;
}
</style>
</head>
<body>
<svg>
<rect width=300 height="100" style="fill:rgb(0, 0, 255); stroke-width:3; stroke:rgb(0,0,0);" />
</svg>
</body>
</html>
What I'm expecting is that the svg will be inside the body(with a padding of 10px on all sides) and there won't be any scroll bar. But what is happening is that top and left padding for body is working fine, but the right padding is not. The right border for svg is sticking with the body(check out the image for clarification).
The width: 100% is the actual width of the parent element, which in your case is the body element.
When you add a padding to it, you'll get a width of 100% + padding. you can add box-sizing: border-box; to the svg style so the browser will calculate the width including the padding.
body, html {
padding: 10px;
margin: 0;
}
svg {
width: 100%;
height: 100%;
padding: 15px;
border: 1px solid red;
box-sizing: border-box;
}
<svg>
<rect width=300 height="100" style="fill:rgb(0, 0, 255); stroke-width:3; stroke:rgb(0,0,0);" />
</svg>
Use box-sizing: border-box.
By default, all elements have box-sizing: content-box set. In this setting, browser only counts the width and height of the actual content in elements.
In box-sizing: border-box, browser includes everything within the border in its calculation of elements.
<!DOCTYPE html>
<html>
<head>
<title>SVG Shapes</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
body, html {
padding: 10px;
margin: 0;
}
svg {
width: 100%;
height: 100%;
padding: 15px;
border: 1px solid red;
}
</style>
</head>
<body>
<svg>
<rect width=300 height="100" style="fill:rgb(0, 0, 255); stroke-width:3; stroke:rgb(0,0,0);" />
</svg>
</body>
</html>
No need to change in HTML file.
Only Add below CSS property in svg class.
svg {
box-sizing: border-box;
}
I created a custom page template, here the link http://goo.gl/UFgzGQ, but I noticed that the style of header is messed up only on that page.
How to fix this?
Here's the css
.header-wrap .search-icon {
float: right;
position: relative;
margin-top: -32px;
line-height: 6;
margin-right: -30px;
border-left: 1px solid #ECECEC;
cursor: pointer;
padding: 0 20px;
}
.header-wrap .ak-search {
background: none repeat scroll 0 0 #FFF;
display: none;
padding: 10px;
position: absolute;
right: 0;
top: 100%;
z-index: 9999;
box-shadow: 1px 2px 3px rgba(0,0,0,0.2);
}
EDIT
Actually its not the CSS which causing the misalignment or misplacing the search-icon, its your DOM viz the main culprit as:
your maine-page screen:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
....
you can see that it has perfectly defined header with doctype whereas in your inner-page:
<head>
<script type="text/javascript" src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
.........
there are some broken code viz the main-culprit and causing the issue.