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;
}
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);
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
<!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>Technology-BBC News
</title>
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
#topbar {
width: 1265px;
margin: 0 auto;
height: 40px;
background-color: #FFFFFF;
}
#logo {
margin-top: 8px;
width: 85px;
float: left;
margin-right: 15px;
}
.topbar-section {
float: left;
border-left: 1px solid #CCCCCC;
height: 100%;
}
#signin-img {
width: 22px;
margin-top: 11px;
margin-left: 11px;
float: left;
}
#signin-text {
/* margin-top: 100px; */
position: relative;
top: 10px;
left: 8px;
font-weight: 600;
font-size: 13px;
padding-right: 50px;
}
</style>
</head>
<body>
<div id="topbar">
<img id="logo" src="images/BBC_logo.png" alt="logo">
<div id="singin" class="topbar-section">
<img id="signin-img" src="images/signin.png" alt="">
<span id="signin-text"> Sign in</span>
</div>
</div>
-
</body>
</html>
here I am trying to give margin to #signin-text but it's not working ... I used positioning that worked but margin-top didn't can someone please tell me why the margin-top property in #signin-text not working this is my first question of stackoverflow please forgive if the question is asked in a wrong way. :)
span is an inline element. That's why it can't accept margin. If you change this (change its block level) by giving display: inline-block for example, the margin will affect.
span {
margin-top: 15px;
}
.inline-block {
display: inline-block;
}
<div>
<span>natural</span>
</div>
<div>
<span class="inline-block">inline-block</span>
</div>
Since you're using css property top with margin-top it will not work.top always takes precedence over margin-top when using with position property. Check https://www.w3schools.com/Css/css_positioning.asp for reference. Try using top with a value 100px
spans are the inline elements that take margins horizontally only not vertically, Only the block and inline-blocks can take margins as vertically and horizontally.
Margin properties specify the width of the margin area of a box. The
'margin' shorthand property sets the margin for all four sides while
the other margin properties only set their respective side. These
properties apply to all elements, but vertical margins will not have
any effect on non-replaced inline elements.
there are many solutions to your problem, either use div or specify span tag as inline-block in your style tag. Still, there are many other ways to achieve this
what I want to ask is "shouldn't be line-height have a value of 3em in h2. how it is actually working. when I set set font-size:2em and line-height:3em it is not in center vertically. How can be a line-height:1.5 is keeping the text in center of header?"
html{
font-size:10px;
}
h2{
margin:0;
}
.card{
width: 35em;
height: 22em;
margin: 05em auto;
background-color: red;
}
.card header{
height: 3em;
padding: 1em;
background: orange;
}
.card header h2{
font-size:2em;
line-height: 1.5em;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<section class="card">
<header>
<h2>This is Header</h2>
</header>
</section>
</body>
</html>
I figured it out myself.
problem is here
.card header h2{
font-size:2em;
line-height: 1.5em;
}
basefont size is set to 10px. so when i set font-size:2em it means font-size has value "20px" so when line-height is set to 1.5em it is taking the current font-size value which is 20px (2em) so now line-height:1.5em means 1.5 of 20px which is 30px.
in short: em refers to local font-size value first then to parent and last to global.
I have the following simple example of an img and a p floated next to each other in a div. If you uncomment the last bit of CSS, the text drops below the image and stays there - but only in IE8 Standards mode. How do I get the image to resize in IE8 without this unfortunate side effect?
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.slide {
border-style: solid;
border-color: #DDDDDD;
border-width: 7px;
display: inline-block;
zoom: 1;
*display: inline;
}
.slide img {
border-right-style: solid;
border-color: #DDDDDD;
border-width: 7px;
float: left;
}
.slide .caption {
width: 230px;
float: left;
padding: 10px 10px 10px 20px;
}
/* Here's the issue. */
/*.slide img, .slide, .slide_wrapper {
max-width: 100%;
height: auto;
}*/
</style>
</head>
<body>
<div class="slide_wrapper">
<div class="slide">
<img src="http://placehold.it/362x250" />
<p class="caption">
test2
</p>
</div>
</div>
</body>
</html>
Setting an explicit width makes the text behave as expected:
.slide {
width: 629px;
}
Put this in your <head></head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
It probably fix the problem.