Can't figure our how to remove padding from imported component
You can plasses classes to all SMUI components, so you can do something like:
<Accordion class="myclass" />
All you have to remember is to mark those classes as global.
You would probably use some utility class for setting padding to 0, so this is not so much of a problem.
How do I remove the side padding in the following case?
This is because of Bootstrap's container
class. Bootstrap has a row
class that cancels out the container
class' padding.
You can do something like this:
<section class="container">
<div class="row">
<!-- your stuff -->
</div>
</section>
For your reference, the container
class provides:
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
And the row
class:
.row {
margin-right: -15px;
margin-left: -15px;
}
And here is your fiddle updated.
How to remove inexplicable padding in table cell caused by padding in child div?
Set the vertical alignment on your table cells;
.table td{
padding:0px !important;
vertical-align:top;
}
jsFiddle example
Update (2018-07-16): setting box-sizing: border-box;
on .box
fixes the issue in Chrome.
Remove padding from columns in Bootstrap 3
You'd normally use .row
to wrap two columns, not .col-md-12
- that's a column encasing another column. Afterall, .row
doesn't have the extra margins and padding that a col-md-12
would bring and also discounts the space that a column would introduce with negative left & right margins.
<div class="container">
<div class="row">
<h2>OntoExplorer<span style="color:#b92429">.</span></h2>
<div class="col-md-4 nopadding">
<div class="widget">
<div class="widget-header">
<h3>Dimensions</h3>
</div>
<div class="widget-content">
</div>
</div>
</div>
<div class="col-md-8 nopadding">
<div class="widget">
<div class="widget-header">
<h3>Results</h3>
</div>
<div class="widget-content">
</div>
</div>
</div>
</div>
</div>
if you really wanted to remove the padding/margins, add a class to filter out the margins/paddings for each child column.
.nopadding {
padding: 0 !important;
margin: 0 !important;
}
CSS: How can i get rid of the Input box spacing problem?
Add box-sizing: border-box
to your inputs. That way, the padding
you add will not increase the inputs width, as width and height properties will include the content, padding, and border.
To know more about box-sizing
property, see box-sizing - CSS: Cascading Style Sheets | MDN
Obs: I added some background color to your inputs to make their width visible.
login ul {
margin: 50px;
padding: 0;
list-style-type: none;
}
.login {
vertical-align: middle;
}
login li input {
border-style: solid;
border-width: 5px;
border-color: black;
}
login li input[type="text"] {
padding-left: 10px;
color: #1ED760;
font-weight: 900;
font-size: 120%;
box-sizing: border-box;
background-color: #eee;
}
.username-box {
margin: 5px;
padding: 0px;
border: 0;
width: 90%;
height: 40px;
}
.username-box::placeholder {
color: #1ED760;
font-weight: 900;
font-family: Arial;
}
.password-box {
margin: 5px;
padding: 0;
border: 0;
width: 90%;
height: 40px;
}
.password-box::placeholder {
color: #1ED760;
font-weight: 900;
font-family: Arial;
}
.login-btn {
margin: 5px;
padding: 0;
border: 0;
height: 40px;
width: 90%;
padding: 0px 0px;
text-align: center;
color: black;
font-weight: 900;
font-family: Arial;
font-size: 120%;
}
<login class="login">
<ul>
<li><input class="username-box" type="text" placeholder="Username"></li>
<li><input class="password-box" type="text" placeholder="Password"></li>
<li><button width="" class="login-btn" type="submit"><div class="login-btn.text">Login</div></button></li>
</ul>
</login>
How to remove margin space around body or clear default css styles
body
has by default 8px
margins: http://www.w3.org/TR/CSS2/sample.html
body {
margin: 0; /* Remove body margins */
}
Or you could use this useful Global reset
* {
margin: 0;
padding: 0;
box-sizing:border-box;
}
If you want something less *
global than:
html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
some other CSS Reset:
http://yui.yahooapis.com/3.5.0/build/cssreset/cssreset-min.css
http://meyerweb.com/eric/tools/css/reset/
https://github.com/necolas/normalize.css/
http://html5doctor.com/html-5-reset-stylesheet/
…
Remove all padding and margin table HTML and CSS
Try to use this CSS:
/* Apply this to your `table` element. */
#page {
border-collapse: collapse;
}
/* And this to your table's `td` elements. */
#page td {
padding: 0;
margin: 0;
}
Related Topics
Failed to Load Resource: the Server Responded With a Status of 404 (Not Found) CSS
How to Style Selected Option Color Separately from Disabled Option
How to Remove Outline in Bootstrap 4
How to Get an Iframe to Be Responsive in iOS Safari
Htmlspecialchars() Expects Parameter 1 to Be String Array Given
What to Do Regular Expression Pattern Doesn't Match Anywhere in String
What Are the Implications of Using "!Important" in Css
My Inline-Block Elements Are Not Lining Up Properly
How to Override Bootstrap CSS Styles
How to Remove Margin Space Around Body or Clear Default CSS Styles
In Angular 4, How to Dynamically Set Min Date and Max Date in Date Picker
Html Select Only One Checkbox in a Group
Maxlength Ignored for Input Type="Number" in Chrome
Css Margin Terror; Margin Adds Space Outside Parent Element
≪Button≫ Vs. ≪Input Type="Button" /≫. Which to Use