logo
down
shadow

Text won't margin accordingly when margin or padding is used?


Text won't margin accordingly when margin or padding is used?

By : user2952066
Date : November 19 2020, 12:41 AM
fixed the issue. Will look into that further Check out my PEN I personally like to separate areas within elements for more granular control. In this case I have wrapped your photo and text in 2 separate divs so they can float next to each other.
I have added box-sizing: border-box to all elements so that you can pad the text (as padding is added inside the boundaries of the elements' border) in without affecting the width / layout of the list item - you should be using this if you like to have widths such as 60% + 40% = 100%. Without this the padding would be added to the outside thus breaking your layout as your divs would not equal 100% anymore.
code :
 <div id="main">
     <ul>
         <li class="paper">
             <div class="papercontent">
                 <div class="inner first">
                     <img class="pimg" src="http://placekitten.com/g/350/350" alt="oneplus-one-top10" />
                 </div>
                 <div class="inner second">
                     <p class="pheader"><span class="pnumber">#1</span> OnePlus One</p>
                     <p class="ptext"> Apple unveiled its new version of Mac OS X – Yosemite at this year’s WWDC 2014. And from using the beta, we think it’s beautiful. The new interface in Yosemite is simply superb. Even all the app icons get a new design. The new typography is arguably cleaner.</p>
                 </div>

             </div>
         </li>
     </ul>
</div>
*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
#main {
    display: block;
    margin: auto;
    max-width: 830px;
}
ul {
    margin: 0;
    padding: 0;
}
.paper {
  background-color: rgb(255, 255, 255);
  box-shadow: 1.5px 2.598px 8.6px 1.4px rgba(0, 0, 0, 0.09);
  font-size: 1.8em;
  padding: 30px;
  font-weight: 300;
  font-family: 'Helvetica Neue',sans-serif;
  }

.pnumber
{
  color:white;
}
.pheader
{
  font-size:35px;
    margin: 0;
}
.papercontent
{
  background-color: rgb(253, 19, 126);
    float: left;
}
.ptext
{
  font-size: 0.8em;
  font-weight: 300;
  font-family: 'Helvetica Neue',sans-serif;
}   
 li {
  padding: 10px;
  overflow: auto;
}

 li:hover {
  background: #eee;
  cursor: pointer;
}
ul {
  list-style-type: none;
}
.pimg {
    max-width: 100%;
    float: left;
    height: auto;
}
.inner {
    float: left;
}
.inner.first {
    width: 40%;
}
.inner.second {
    width: 60%;
    padding: 16px;
}


Share : facebook icon twitter icon
Centering elements with margin/padding using .outerWidth()/.outerHeight(). Function returns different values for margin

Centering elements with margin/padding using .outerWidth()/.outerHeight(). Function returns different values for margin


By : goga
Date : March 29 2020, 07:55 AM
it helps some times This is happening because you are setting padding to the inner box instead of the outer one.
You can set it using an if condition.
code :
var $outer = $(".outer");
var $inner = $(".inner");

var getSpace = function(axis)  {
  if (axis.toLowerCase() == "x") {
    return ($outer.outerWidth() - $inner.outerWidth()) / 2;
  }
  else if (axis.toLowerCase() == "y") {
    return ($outer.outerHeight() - $inner.outerHeight()) / 2;
  }  
}

var renderStyle = function(spacingType) {
  var xi = getSpace("x");
  var yi = getSpace("y");
  if (spacingType == "padding") {
      var $ei = $outer;
  } else if (spacingType == "margin") {
      var $ei = $inner;
    } 
  $.each(["top", "right", "bottom", "left"], function(index, direction) {
    if (direction == "top" || direction == "bottom") {
      $ei.css(spacingType + "-" + direction, yi);
    }
    else if (direction == "right" || direction == "left") {
      $ei.css(spacingType + "-" + direction, xi);
    }                                     
  });                
}; 

renderStyle("padding");
.outer {
  width:400px;
  height:200px;
  border:1px solid black;
  margin:20px;
  box-sizing:border-box;
}
.inner {
  width:100px;
  height:100px;
  background-color:grey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="demo" class="outer">
  <div class="inner">
  </div>
</div>
Child tag is absolute, and its margin-left is begin from padding of the parent tag. Why is its margin-right beginning fr

Child tag is absolute, and its margin-left is begin from padding of the parent tag. Why is its margin-right beginning fr


By : stegnom
Date : March 29 2020, 07:55 AM
I wish this helpful for you You are mixing and matching. for absolute positioning what matters is left, top, right, bottom, width and height. But my guess is that you don't need it. What you are trying to achieve is a column of text in the middle of .article with some sides.
You will almost achieve it if you drop the absolute positioning of .middle. then the margins on it will start where you want. And you'll be left with figuring out the offsets.
code :
body {margin: 0px; padding:20px; position:relative;}
.article { background-color: #eee; padding:20px; border:2px solid #999; overflow: hidden;}
.left {position: absolute; top:40px; left:40px; width:160px; padding:20px; border: 2px solid #999; background-color: #fff;}
.right {position: absolute; top: 40px; right: 40px; padding: 20px; width: 80px; background-color: #fff; border: 2px solid #999;}
.middle { margin-left: 220px; margin-right: 180px; background-color: #fff; border: 2px solid #999; padding:20px; word-break: break-all;}
img {width:80px;}
<div class = "article">
    <div class = "left">sldkfjlsj</div>
    <div class = "middle">lksdflmsddssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssslksmflmsgmfmg;df;g,df;gl,f;,gd;fl,g;fl,g;ldf,;gldf;mgkdfgdfmgpfmgpsomgpsmgpspgmspmgosmgmspgomsgmspgmspgomspgmpsogflmsldfmsldmflsfm</div>
    <div class="right"><img src="http://lorempixel.com/output/people-h-c-80-120-10.jpg"></div>
</div>
Android how do I set a percentage padding/margin so EditText has 10% margin on either side?

Android how do I set a percentage padding/margin so EditText has 10% margin on either side?


By : Borislav Dechev
Date : March 29 2020, 07:55 AM
wish of those help It doesn't really support setting values by percent(except for some of the xml Animation files seem to) If you are dead set on using a percentage the best way I can think of is from java call getWidth and getHeight then multiply those by your decimal and set the result with setMargin(), or setPadding().
Problem with IE8: p elements have a padding/margin that wont go away!

Problem with IE8: p elements have a padding/margin that wont go away!


By : Jabba
Date : March 29 2020, 07:55 AM
this will help On the website in the code you have written not

. Try replacing the b with a p.
The extra margin problem is actually the image you used as the container's top. Located inside .mainPageBox and above .pageBoxContent. The white space above the subheading is actually part of the image.

Why is -webkit-margin-before (and after, start, end) not being overridden by my explicit margin and padding rule?

Why is -webkit-margin-before (and after, start, end) not being overridden by my explicit margin and padding rule?


By : 黃信諭
Date : March 29 2020, 07:55 AM
seems to work fine I solved it.
The rule specified by the user gets applied, and webkit renders margin according to it, "overriding" the default -webkit ones in some way.
Related Posts Related Posts :
  • RouterLink is not working properly dynamically in angular 6
  • Simple HTML rendering issue
  • Best Approach to separate Form sections
  • How to Organize Phonegap HTML Files
  • Wrap a long single word using CSS
  • I am trying to implement a hover effect using CSS3 Transitions
  • How can I avoid hard coding line height while vertically centering element in a div?
  • Bootstrap3 - Removed container-fluid
  • Bootstrap framework not responsive for asp.net webform
  • How to align two inner divs inside outer absolute positioned div that has fixed width in which both divs have the same w
  • Div to ignore html tags
  • Prevent caching and stale content with a static web site
  • Is there a way to change the whole document with one selector in CSS?
  • why cant I click om my navigationbar links?
  • Is there a CSS/HTML way to cut multiple shapes out of the top/bottom of a div?
  • css border around multiple links/images
  • 'No data was received in the uploaded file', but file is not empty
  • How input boxes save previous entries
  • AMP carousel direction change
  • Bootstrap multiple carousel not working on thumbnails click
  • Is there a way to put a permanent space into an input field?
  • Html boxes not displaying properly
  • How can I change a variable in Jekyll _config.yml dynamically?
  • How can I prevent DIVs from overlapping a right floated image?
  • Eclipse and .tml files highlighting not working
  • Footer is not in the bottom of the window, (phonegap jquery mobile app for windows mobile)
  • How to put div over another
  • How to use glyphicons in bootstrap 3.0
  • Wordpress page links not working
  • How Do I Use CSS to Set the Color of An ALink?
  • Webpage doesn't scroll smoothly on screen
  • YouTube iframe, browser looks for file locally
  • html displaying inline image
  • Font acting differently on IE and Firefox
  • Encoding and decoding of the character references
  • An Image Button navigate to another site html/css
  • IE8 "Save Target as ..." won't display for block elements
  • Image hover transition for span - CSS
  • How to apply min and max on textarea?
  • How to draw multiple horizontal lines (Notebook Paper effect) using css?
  • Table Printing Issue: Gaps in top and Bottom Border of th Elements
  • grouping elements with div and applying stylesheet for that group
  • Click <div> to expand, then click again to shrink - Its expanding, just not shrinking
  • CSS - How can I center a <script>'s output?
  • Django's template variable gets interpreted as HTML
  • ngx datatable vertical scroll with rowheight set to auto
  • How to make input text border with CSS when it's OnFocus
  • Anyone know of a calendar web widget for my website I could use?
  • How does Bootstrap manage to use fixed positioning for navbar on iOS?
  • Centered text in fully clickable table cell
  • Compare HTML and HTML5
  • steps of creating webpage in bangla
  • css root element margin
  • What is the point of using absolute positioning in CSS?
  • Responsive solution for long URLs (that exceed the device width)
  • Divs don't collapse as they should - media queries
  • QTreeWidgetItem display html
  • Testing html/css image on local from jfiddle
  • long attribute value of HTML
  • Why my svg picture is truncated at the bottom when embedded in html
  • shadow
    Privacy Policy - Terms - Contact Us © ourworld-yourmove.org