Having Difficulty Understanding How to Remove Some Padding

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



Leave a reply



Submit