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/

问题1：为什么setup-head中的顶部和底部填充不一样？

问题2：为什么photo-section的边框与setup-head不一样？

Answer 1

问题1：为什么设置头中的顶部和底部填充不是相同？

因为您的子元素已浮动，因此从正常流中取出。在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;
}

问题2：为什么照片部分的边框不一样设置头？

这是photo-section的{{1}}孩子的边框，所以你得到了双倍。如果img元素没有有效的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;
}

Answer 2

问题1：

float left和float right photo-name和photo-date因此从正常流程中取出，您必须将overflow:auto添加到父级class，所以它不会失去填充状态。

＆＃13;

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;
    overflow: auto;
}

.photo-name { float: left; }
.photo-date { float: right; }


.photo-section {
	border-left: 1px solid #cacece;
    border-right: 1px solid #cacece;
}

＆＃13;

<!-- 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-->

＆＃13;

问题2：如果没有src并且无法覆盖，则浏览器会添加img childs边框。你可以轻松修复（因为你已经在图像周围有一个边框）

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

来自您的代码

＆＃13;

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;
    overflow: auto;
}

.photo-name { float: left; }
.photo-date { float: right; }

＆＃13;

<!-- 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-->

＆＃13;

Answer 3

添加溢出：隐藏;到.setup-head或clear your floats。
他们是一样的。您会看到2px边框，因为图像丢失了。

CSS边框和填充不尽相同

3 个答案: