html - CSS 边框和填充不完全相同

Question

HTML:

        <!-- start setup section -->
            <div class='photo-setup'>

                <div class='setup-head'>
                    <div class='photo-name'>Photo Name : <input type='text' placeholder='Photo Name' name='photo-name' title='Photo Name'></div>
                    <div class='photo-date'>Photo Date : <?php echo date('F j, o', time()) ?></div>
                </div>

                <div class='photo-section'>
                    <img src='' width='600' height='600' alt='photo'>
                </div>

                <div class='tag-section'>
                    Tags :  <input type='text' placeholder='Tags e.g. (#beach #park #dog)'>
                </div>

                <div class='commit-section'>
                    <a class='save' href='#'>Save</a><a class='cancel' href='#'>Cancel</a>
                </div>

            </div>
        <!-- end setup section-->

CSS:

img { border: none; }

.photo-setup {
    width: 600px;
    height: auto;
    margin: 0 auto;
}

.setup-head {
    border-left: 1px solid #cacece;
    border-right: 1px solid #cacece;
    border-top: 1px solid #cacece;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    padding: 1em;
}

.photo-name { float: left; }
.photo-date { float: right; }


.photo-section {
    border-left: 1px solid #cacece;
    border-right: 1px solid #cacece;
}

结果:https://jsfiddle.net/rw5beqtk/

问题一:为什么setup-head中的top和bottom padding不一样？

问题二:为什么photo-section的边框和setup-head不一样？

Answer 1

Question 1: Why is the top and bottom padding in setup-head not the same?

因为您的子元素是 float 的，因此脱离了正常流。设置overflow:hidden在 setup-head会解决这个问题。

.setup-head {
    border-left: 1px solid #cacece;
    border-right: 1px solid #cacece;
    border-top: 1px solid #cacece;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    padding: 1em;
    overflow: hidden;
}

Question 2: Why is the border of photo-section not the same as setup-head?

它是 photo-section的 img child 的边界，所以你得到双倍。当 img元素没有有效的 src , 它有一个代表图像大小的边框，它不会随着 border: none 消失。 .

---

带有图像和 overflow: hidden 的示例片段

img { 
  border: none;
  vertical-align: top; 
}

.photo-setup {
  width: 600px;
  height: auto;
  margin: 0 auto;
}

.setup-head {
  border-left: 1px solid #cacece;
  border-right: 1px solid #cacece;
  border-top: 1px solid #cacece;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  padding: 1em;
  overflow: hidden;
}

.photo-name { float: left; }
.photo-date { float: right; }

.photo-section {
  border: 1px solid #cacece;
  overflow: hidden;
}

<div class='photo-setup'>

  <div class='setup-head'>
    <div class='photo-name'>Photo Name : <input type='text' placeholder='Photo Name' name='photo-name' title='Photo Name'></div>
    <div class='photo-date'>Photo Date : <?php echo date('F j, o', time()) ?></div>
  </div>

  <div class='photo-section'>
    <img src='http://placehold.it/600/eee' width='600' height='600' alt='photo'>
  </div>

  <div class='tag-section'>
    Tags :  <input type='text' placeholder='Tags e.g. (#beach #park #dog)'>
  </div>

  <div class='commit-section'>
    <a class='save' href='#'>Save</a><a class='cancel' href='#'>Cancel</a>
  </div>

</div>